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

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

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

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

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

你就会看到错乱的图标样式已经改变，如下图：

样式排列已经整齐

如果在包裹组件的标签上添加class名 —— class=“ql-container ql-snow”。

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

文本编辑器多了一层外框

补充知识：Vue-Quill-Editor富文本使用笔记

安装好以后，按照这种方式写，基本接口搭建完成，细节方面自己稍微调整。

注意：工具栏可以使用toolbar数组形式配置，也可以使用html方式配置。感觉数组形式更简洁，html形式样式更好调整。

以上这篇解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。