1.安装quill-editor编辑器
npm install vue-quill-editor --save
2.在组件中引入(也可以全局引入，略有不同)
import { quillEditor } from "vue-quill-editor";import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";
3.template内容
<quill-editor ref="myQuillEditor" :options="editorOption" />
ponents及data设置
export default {components: {quillEditor,},data() {return {editorOption: {theme: "snow", // 默认主题placeholder: "请在这里输入", // 默认输入内容 },};},};
效果图：
5.自定义功能
在<quil-editor>标签中，在editorOption对象中添加modules对象，在modules对象中再添加toolbar数组，用于设置功能项
data() {return {editorOption: {theme: "snow", // 默认主题placeholder: "请在这里输入", // 默认输入内容 modules: { // 富文本编辑器自主设计保留功能toolbar: ["bold", // 加粗 "underline", // 下划线{ size: ["small", false, "large", "huge"] }, // 字体大小{ color: [] }, // 字体颜色],},},};},
效果图：
以上是引用富文本编辑器的全部内容 ，下面是完整的代码：
<template><quill-editor ref="myQuillEditor" :options="editorOption" /></template><script>import { quillEditor } from "vue-quill-editor";import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";export default {name: "test2",components: {quillEditor,},data() {return {editorOption: {theme: "snow", // 默认主题placeholder: "请在这里输入", // 默认输入内容 modules: { // 富文本编辑器自主设计保留功能toolbar: ["bold", // 加粗 "underline", // 下划线{ size: ["small", false, "large", "huge"] }, // 字体大小{ color: [] }, // 字体颜色],},},};},};</script>
这篇博文有较详细的功能介绍，给了我很大帮助：/article/147830.htm
在开发中遇到几个比较棘手的问题：
1）样式问题：在按以上方式引入编辑器到项目中后，发现富文本编辑器样式出现一些问题，具体表现为字体大小和字体颜色功能按键下沉，如图：
刚开始以为样式就是的，虽然有点丑，但没去在意，直到想起要写这篇博文，就新建了项目试一下，发现事情并不是我想的这样。。。完整的样式（整齐、平整）：
追踪问题，发现问题在于项目中同时引入了elementui框架，而这个富文本模块放在el-form中，被el-form默认的样式影响了，定位到这些默认样式：
解决方案：
自定义css样式就好了，问题在于在哪里编写，编写什么样式，这里方法不唯一，我的办法是在编辑器默认的类中添加一个行高，当然别忘了添加/deep/：
// 富文本编辑器样式问题调整，受到elementui的样式影响，使得字体大小选择项和颜色项下移，限定行高解决此问题/deep/ .ql-formats {line-height: 15px;}
2）字体大小样式不显示问题：在vue中用v-model绑定富文本编辑器，点击提交按钮时，编辑器会生成一段html文本（字符串），保存到v-model绑定的属性中，用于提交数据和在其他页面中显示（富文本编辑器的核心需求）利用v-html，即可把字符串渲染为html代码：<div v-html="htmlString"> </div>
问题在于，当我试着这样在页面中展示时，发现字体大小样式没有变化，而其余三种样式都发生变化了（此处场景仅限于上面功能选择后的例子）。打开控制器查看代码，发现了问题所在：
从上面视图可看出，字体加粗，下划线，改变颜色都成功显示，唯有字体大小没有显示，而从代码可看出，只有改变字体大小是引用了富文本编辑器自带的类，其余都是一段html自带标签或者style，问题找到了，肯定是在渲染后的页面中，找不到ql-size-huge这个类，所以123当作正常显示。那么，为什么会出现这个问题呢？原因在于我在引用编辑器的时候，并没有使用全局引用，而只是在此组件中引入，这样导致在其他组件中根本没有ql-size-huge这个类。在vue-cli脚手架中即是没有在main.js中引入此编辑器。所以只要重新全局引用即可。
3）自定义字体大小：用过quil-editor这个编辑器后，可能会有一种需求，想要定义多种字体大小样式，而我们会发现，此编辑器只提供4种字体大小：
这个问题网上有很多的解决方案，但似乎都离不开更改quill-editor自带的包，这种方法的弊端在于，在开发环境中更改后，发布到线上环境要重新更改一次，而且如果以后要升级该编辑器版本，要重新维护，这是一件相当麻烦的事。而我还没有更好的解决方案。
