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/