最近的一个项目中，需要用到富文本，项目基于vue开发，使用的是nuxt.js应用框架，在网上找了很多富文本组件，最后选择了vue-quill-editor这个富文本组件，捣鼓了很久，终于在页面中呈现使用了。总结一下。
如果就是单纯的vue，没有nuxt.js的话，那直接下载引用即可。但是因为nuxt默认首页服务端渲染，其他页面客户端渲染，而window对象只在客户端存在，因此最好不要让带富文本的页面出现在首页使用。使用中碰到诸多问题
下载vue-quill-editor
npm install vue-quill-editor --save
插件编写
- 在plugins下创建nuxt-quill-plugin.js
import Vue from 'vue'
//import VueQuillEditor from 'vue-quill-editor'
//Vue.use(VueQuillEditor)
if (process.browser) {
const VueQuillEditor = require('vue-quill-editor/ssr')
Vue.use(VueQuillEditor)
}在项目中，我是注释掉了上面两条语句。如果在本地使用，还需要将if语句中的，/ssr也去掉才行。
- 然后在nuxt.config.js中引入该插件
plugins: [{src: '~plugins/nuxt-quill-plugin.js', ssr: false}]
同样的，在本地使用时，把后面的ssr:false也去掉，逗号也要去掉哦。
由于nuxt.js是服务端渲染，不注释掉的话，会报错说找不到window。
- 在组件中写入
<quill-editor :options="editorOption"
ref="QuillEditor"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)"
@ready="onEditorReady($event)">
</quill-editor>这个时候你会发现出来的是错位的。不要着急，还要在组件中引入富文本的css文件
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
computed: {
editor() {
return this.$refs.QuillEditor.quill
}
},
onEditorChange({editor, html, text}) {
this.content=html;
console.log(html)
},
onEditorFocus() {
},
onEditorReady() {
},
onEditorBlur() {
},到这里，就OK了。在页面中就呈现出了富文本。
自定义toolbar修改工具栏options
通过options来修改但是他的默认值。引入你需要的功能。而且不同功能有不同的写法，现总结如下：
1.只需要填写功能名的
加粗 - bold；
斜体 - italic
下划线 - underline
删除线 - strike
引用- blockquote
代码块 - code-block
公式 - formula
图片 - image
视频 - video
清除字体样式- clean
这一类的引用 直接['name','name']这种格式就好了
2.需要有默认值的
标题 - header
[{ 'header': 1 }, { 'header': 2 }] 值字体大小
列表 - list
[{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet
上标/下标 - script
[{ 'script': 'sub'}, { 'script': 'super' }], 值sub，super
缩进 - indent
[{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等
文本方向 - direction
[{ 'direction': 'rtl' }], 值rtl
3.有多个值 以下拉列表形式显示
大小 - size
[{ 'size': ['small', false, 'large', 'huge'] }],
标题 - header
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
4.有系统默认值的功能只需填写一个空数组 就会有出现默认的选项
颜色 - color
背景颜色 - background
字体 - font
文本对齐 - align
他们的格式都是
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }]
这种格式
修改字体大小选择，使用自定义的列表和单位(rem)
在vue-quill-editor这个富文本编辑器里，对于文字的默认样式是small，nomal，large这样，如果我想要修改成12px,14px，16px如何实现呢？
修改组件默认配置：
1、在node_modules找到文件夹-quill-quill.snow.css文件
2、在css文件中，找到下面这组css属性
默认的样式是动态的，我们需要对这个css属性进行覆盖重写：
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
content: '10px';
font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
content: '20px';
font-size: 20px;
}
//默认的样式
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '14px';
font-size: 14px;
}//rem：需要说明一下，在编辑的时候还是显示px单位，但最终生成的源代码使用rem，因为编辑是在pc上，并且运营人员也只熟悉px这个单位，对rem没有概念。
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="0.26rem"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.26rem"]::before {
content: '10px';
font-size: 10px;
}写成这样就覆盖了默认的css样式。然后我们需要在初始化quill的地方（上面引入部分在export default上，下面声明变量的在mounted里面）加上下面的代码：
import Quill from 'quill'
var Size = Quill.import('attributors/style/size');
// Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px'];
Size.whitelist = ['0.26rem', '0.31rem', '0.37rem', '0.41rem', '0.47rem', '0.52rem'];
Quill.register(Size, true);在自定义字体大小的地方写上我们需要的size，这个大小和我们在css，js里写的大小一样。
'size': ['10px', '12px', '14px', '16px', '18px', '20px']
这样就修改了默认的字体大小样式了。