这篇文章主要介绍了解决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富文本使用笔记
段落标题1标题2标题3标题4标题5标题6 10px12px14px16px18px20px 宋体黑体微软雅黑楷体仿宋Arial
安装好以后，按照这种方式写，基本接口搭建完成，细节方面自己稍微调整。
注意：工具栏可以使用toolbar数组形式配置，也可以使用html方式配置。感觉数组形式更简洁，html形式样式更好调整。
以上这篇解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。
以上就是解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题的详细内容，更多请关注本站其它相关文章！
