nuxt.js局部引用quill富文本编辑器

想在nuxt.js中使用quill富文本编辑器。按照网上常见的方法，将css， js 添加到 nuxt.config.js. 这是全局调用了quill的css,js 文件。 在每个页面的源码中，都可以看到quill 的css，js。 这是没有必要的，不是每个页面都使用了quill 编辑器。所以在此介绍局部引用quill富文本编辑器。

步骤

1 安装

npm install vue-quill-editor

2 在plugins目录下创建vue-quill-editor.js。 添加内容：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'

Vue.use(VueQuillEditor)

3 在pages或者 components中的vue文件中使用。

如在components中添加 Editor.vue, 内容如下：

<template>
<div>
<section class="container">
    <quill-editor v-if="isClient" v-model="content" 
                ref="myQuillEditor"
                :options="editorOption" 
                 @blur="onEditorBlur($event)" 
                 @focus="onEditorFocus($event)" 
                @ready="onEditorReady($event)"> 
  </quill-editor>
    <div >
      <input type="button" class="publish-article" value="提交短文">
    </div>
  </section>
  </div>
</template>


<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

  export default {
    data () {
      return {
        isClient: false,
        content: '<p>开始你的短文书写 . . .</p><p> -  - </p>',
        editorOption: {
          // some quill options
          modules: {
            // toolbar: true 
            toolbar: [
               [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block']
              [{ 'font': [] }],
              [{ 'align': [] }],
            ]
          }
        }
      }
    },
    mounted() {
      console.log('app init, my quill insrance object is:', this.myQuillEditor)
      // setTimeout(() => {
      //   this.content = 'i am changed'
      // }, 3000)
      if (process.client) {
                  const { quillEditor } = require('vue-quill-editor')
                  this.$options.components = { quillEditor }
                  this.isClient = true
        }
    },
    methods: {
      onEditorBlur(editor) {
        // console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {
        // console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
         for(var i=0; i<20; i++)
        {
          this.content += "<p><br /></p>";
        }
        
      },
      onEditorChange({ editor, html, text }) {

      }
    }
  }
</script>
<style  scoped> 
.container {
    width: 100%;
    margin: 0 0 0 20px;
    padding: 20px 0px;
background-color: #ffffff;

}

.title {
  padding-bottom: 20px;
  background-color: transparent;
}
.title-box {
  height: 4rem;
  padding-left: 10px;
  padding-right: 10px;
  width:100%;
}
.publish-article {
  margin-top:20px;
  background-color: #48c774;
  color: #ffffff;
  border-radius: 5px;
  padding-top:5px;
  padding-bottom:5px;
  padding-left: 20px;
  padding-right: 20px;
}
</style>

以上程序中，在判断 process.client 为真后才进行导入 quill 组件， 即在客户端渲染。服务端渲染是没有window， document 的，所以会报错，诸如：Document / Window not defined.
以上程序已成功运行。

参考文章：

Nuxt 报错 Document / Window not defined 亲测解决方案（vue2Editor富文本编辑器之类三方包）
https://blog.csdn.net/q95548854/article/details/105139208/