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

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

先上最终效果，如图：

默认样式

图片裁剪

1、组件编写

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

2.CropUpload组件--图片裁剪

2、插件js编写

• 在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)
}

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

  plugins: ['~plugins/element-ui',
    {src: '~plugins/nuxt-quill-plugin.js', ssr: false}]

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

window is not defined

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