vue的富文本编辑器vue-quill-editor

npm install vue-quill-editor --save

二、在plugins目录下创建nuxt-quill-plugin.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'
Vue.use(VueQuillEditor);

三、配置nuxt.config.js

module.exports = {
  // other config
  // ...
  // import css files as global style
  css: [
    'quill/dist/quill.snow.css',
    'quill/dist/quill.bubble.css',
    'quill/dist/quill.core.css'
  ],

  plugins: [
    // other plugins
    {
      src: '~/plugins/vue-quill-editor',
      ssr: false
    }
  ]
}

四、在合适的位置添加html

<div class="quill-editor" 
   :content="content"
    @change="onEditorChange($event)"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
    v-quill:myQuillEditor="editorOption">
</div>

五、添加js和css

注意：需要将官方文档的内容进行如下修改，否则会出现很多错误！！

<script>
  export default {
    data () {
      return {
        content: '<p>I am Example</p>',
        editorOption: {
          // // some quill options
          // modules: {
          //   toolbar: [
          //     ['bold', 'italic', 'underline', 'strike'],
          //     ['blockquote', 'code-block']
          //   ]
          // }
        }
      }
    },
   
    methods: {
      onEditorBlur(editor) {
        console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {
        console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
        console.log('editor ready!', editor)
      },
      onEditorChange({ editor, html, text }) {
        console.log('editor change!', editor, html, text)
        this.content = html
      }
    }
  }
</script>

<style>
.quill-editor {
      min-height: 200px;
      max-height: 400px;
      overflow-y: auto;
    }
</style>