nuxt中富文本编辑器【vue-quill-editor】的集成

百度搜一下“VUE 富文本编辑器”，五花八门，N多种，推荐比较多的是集成百度的UEditor,然后是vue-quill-editor。后者是专门为vue提供的，结合起来更顺手。试了试UEditor，然后放弃了，虽然功能丰富，但是确实略麻烦。vue-quill-editor简单轻巧又开源，可自己随意订制，因此选了后者。下面简单说一下怎么使用。

先上最终效果，如图：

1、组件编写

①、Quilleditor组件

在components/common下创建Quilleditor.vue，主要代码如下：

template代码：

js代码：

①编辑器配置

②、CropUpload组件--图片裁剪

在components/common下创建CropUpload.vue，主要代码如下：

template代码：

js代码：

至此，两个组件已经创建完成。

2、插件js编写

在plugins下创建nuxt-quill-plugin.js，内容如下：

然后在nuxt.config.js中引入该插件

3、组件使用

在页面中引入如下

所有配置完以后，你会发现出现的效果有可能如下：

这是因为nuxt默认首页服务端渲染，其他页面客户端渲染，而window对象只在客户端存在，因此最好不要让带富文本的页面出现在首页使用。当然这不是终极解决办法，不过vue-quill-editor同样支持服务端渲染，稍候再做研究。

各位看官有什么意见建议，欢迎随时骚扰~~~