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

基于Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题_第1张图片
假设你已经知道如何引入vue-quill-editor,并且遇到了跟我一样的问题(如上图),显示出来的图标排列不整齐,字体,文字大小选择时超出边框。你可以试试下面这种解决办法 。

  1. 在使用文本编辑器的vue页面中引入vue-quill-editor中的样式。
    @import "../../node_modules/quill/dist/quill.snow.css";
    
  2. 然后在组件中添加class名 —— class=“ql-editor”。
    
    
    你就会看到错乱的图标样式已经改变,如下图:
    基于Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题_第2张图片
  3. 如果在包裹组件的标签上添加class名 —— class=“ql-container ql-snow”。
    
        
    
    
    你将会看到下图的效果,文本编辑器外面多了一层容器。
    基于Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题_第3张图片

你可能感兴趣的:(基于Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题)