基于Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题

假设你已经知道如何引入vue-quill-editor，并且遇到了跟我一样的问题（如上图），显示出来的图标排列不整齐，字体，文字大小选择时超出边框。你可以试试下面这种解决办法 。

1. 在使用文本编辑器的vue页面中引入vue-quill-editor中的样式。

   @import "../../node_modules/quill/dist/quill.snow.css";
   

2. 然后在组件中添加class名 —— class=“ql-editor”。

   <quill-editor class="ql-editor"></quill-editor>
   

   你就会看到错乱的图标样式已经改变，如下图：
   
3. 如果在包裹组件的标签上添加class名 —— class=“ql-container ql-snow”。

   <el-form-item class="ql-container ql-snow">
       <quill-editor class="ql-editor"></quill-editor>
   </el-form-item>
   

   你将会看到下图的效果，文本编辑器外面多了一层容器。