解決Vue的文本編輯器 vue-quill-editor 小圖標樣式排布錯亂問題
假設你已經(jīng)知道如何引入vue-quill-editor,并且遇到了跟我一樣的問題(如上圖),顯示出來的圖標排列不整齊,字體,文字大小選擇時超出邊框。你可以試試下面這種解決辦法 。
在使用文本編輯器的vue頁面中引入vue-quill-editor中的樣式。
@import "../../node_modules/quill/dist/quill.snow.css";
然后在組件中添加class名 —— class=“ql-editor”。
<quill-editor class="ql-editor"></quill-editor>
你就會看到錯亂的圖標樣式已經(jīng)改變,如下圖:
樣式排列已經(jīng)整齊
如果在包裹組件的標簽上添加class名 —— class=“ql-container ql-snow”。
<el-form-item class="ql-container ql-snow"> <quill-editor class="ql-editor"></quill-editor> </el-form-item>
你將會看到下圖的效果,文本編輯器外面多了一層容器。
文本編輯器多了一層外框
補充知識:Vue-Quill-Editor富文本使用筆記
<template> <div class="hello"> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @focus="onEditorFocus($event)" @blur="onEditorBlur($event)" @change="onEditorChange($event)" > <div id="toolbar" slot="toolbar"> <!-- Add a bold button --> <button class="ql-bold" title="加粗">Bold</button> <button class="ql-italic" title="斜體">Italic</button> <button class="ql-underline" title="下劃線">underline</button> <button class="ql-strike" title="刪除線">strike</button> <button class="ql-blockquote" title="引用"></button> <button class="ql-code-block" title="代碼"></button> <button class="ql-header" value="1" title="標題1"></button> <button class="ql-header" value="2" title="標題2"></button> <!--Add list --> <button class="ql-list" value="ordered" title="有序列表"></button> <button class="ql-list" value="bullet" title="無序列表"></button> <!-- Add font size dropdown --> <select class="ql-header" title="段落格式"> <option selected>段落</option> <option value="1">標題1</option> <option value="2">標題2</option> <option value="3">標題3</option> <option value="4">標題4</option> <option value="5">標題5</option> <option value="6">標題6</option> </select> <select class="ql-size" title="字體大小"> <option value="10px">10px</option> <option value="12px">12px</option> <option value="14px">14px</option> <option value="16px" selected>16px</option> <option value="18px">18px</option> <option value="20px">20px</option> </select> <select class="ql-font" title="字體"> <option value="SimSun">宋體</option> <option value="SimHei">黑體</option> <option value="Microsoft-YaHei">微軟雅黑</option> <option value="KaiTi">楷體</option> <option value="FangSong">仿宋</option> <option value="Arial">Arial</option> </select> <!-- Add subscript and superscript buttons --> <select class="ql-color" value="color" title="字體顏色"></select> <select class="ql-background" value="background" title="背景顏色"></select> <select class="ql-align" value="align" title="對齊"></select> <button class="ql-clean" title="還原"></button> <!-- You can also add your own --> </div> </quill-editor> </div> </template> <script> import { quillEditor } from "vue-quill-editor"; // 調用富文本編輯器 import "quill/dist/quill.snow.css"; // 富文本編輯器外部引用樣式 三種樣式三選一引入即可 //import 'quill/dist/quill.core.css' //import 'quill/dist/quill.bubble.css' import * as Quill from "quill"; // 富文本基于quill export default { name: "HelloWorld", components: { "quill-editor": quillEditor }, data() { return { editor: null, // 富文本編輯器對象 content:'',// 富文本編輯器默認內(nèi)容 editorOption: { // 富文本編輯器配置,頂部的工具欄 modules: { toolbar:"#toolbar" // toolbar: [ // ["bold", "italic", "underline", "strike"], //加粗,斜體,下劃線,刪除線 // ["blockquote", "code-block"], //引用,代碼塊 // [{ header: 1 }, { header: 2 }], // 標題,鍵值對的形式;1、2表示字體大小 // [{ list: "ordered" }, { list: "bullet" }], //列表 // [{ script: "sub" }, { script: "super" }], // 上下標 // [{ indent: "-1" }, { indent: "+1" }], // 縮進 // [{ direction: "rtl" }] // 文本方向 // ] }, theme: "snow",//主題 placeholder: "請輸入正文" } }; }, mounted() { this.editor = this.$refs.myQuillEditor.quill; }, beforeDestroy() { this.editor = null; delete this.editor; }, methods: { // 準備富文本編輯器 onEditorReady(editor) {}, // 富文本編輯器 失去焦點事件 onEditorBlur(editor) {}, // 富文本編輯器 獲得焦點事件 onEditorFocus(editor) {}, // 富文本編輯器 內(nèi)容改變事件 onEditorChange(editor) { console.log(editor); } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
安裝好以后,按照這種方式寫,基本接口搭建完成,細節(jié)方面自己稍微調整。
注意:工具欄可以使用toolbar數(shù)組形式配置,也可以使用html方式配置。感覺數(shù)組形式更簡潔,html形式樣式更好調整。
以上這篇解決Vue的文本編輯器 vue-quill-editor 小圖標樣式排布錯亂問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue使用codemirror實現(xiàn)一個可插入自定義標簽的textarea
這篇文章主要為大家詳細介紹了Vue如何使用codemirror實現(xiàn)一個可插入自定義標簽的textarea,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02Vue讀取本地靜態(tài).md并側邊欄導航跳轉、展示.md文件的操作方法
這篇文章主要介紹了Vue讀取本地靜態(tài).md并側邊欄導航跳轉、展示.md文件,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08vue框架編輯接口頁面下拉級聯(lián)選擇并綁定接口所屬模塊
這篇文章主要為大家介紹了vue框架編輯接口頁面實現(xiàn)下拉級聯(lián)選擇以及綁定接口所屬模塊,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-05-05karma+webpack搭建vue單元測試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測試環(huán)境的方法示例,這次搭建的測試環(huán)境和開發(fā)環(huán)境隔離,所以理論上適用所有使用vue的開發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05