假設你已經知道如何引入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>

你就會看到錯亂的圖示樣式已經改變，如下圖：

樣式排列已經整齊

如果在包裹元件的標籤上新增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:'',// 富文字編輯器預設內容
   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) {},// 富文字編輯器 內容改變事件
  onEditorChange(editor) {
   console.log(editor);
  }
 }
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

安裝好以後，按照這種方式寫，基本介面搭建完成，細節方面自己稍微調整。

注意：工具欄可以使用toolbar陣列形式配置，也可以使用html方式配置。感覺陣列形式更簡潔，html形式樣式更好調整。

以上這篇解決Vue的文字編輯器 vue-quill-editor 小圖示樣式排布錯亂問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。