nuxt中使用vue-quill-editor富文本编辑器

（1）安装vue-quill-editor

cnpm install vue-quill-editor --save
或
npm install vue-quill-editor --save

（2）plugins下创建nuxt-quill-plugin.js

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

（3）修改nuxt.config.js ,配置插件和样式

  plugins: [
    { src: '~plugins/nuxt-quill-plugin.js', ssr: false }
  ],
  // some nuxt config...
  css: [
    'quill/dist/quill.snow.css',
    'quill/dist/quill.bubble.css',
    'quill/dist/quill.core.css'
  ],

（4）pages/spit/submit.vue

<template>
  <div class="wrapper release-tc">
    <div class="release-box">
      <h3>发布博客</h3>
      <div class="editor">
        <div class="quill-editor"
             :content="content"
             @change="onEditorChange($event)"
             @blur="onEditorBlur($event)"
             @focus="onEditorFocus($event)"
             @ready="onEditorReady($event)"
             v-quill:myQuillEditor="editorOption">
        </div>
      </div>
      <div class="btn">
        <button class="sui-btn btn-danger btn-release" @click="save">发布</button>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
  </div>
</template>

<script>
  import '~/assets/css/page-sj-spit-submit.css'//html本身样式
  export default {
    data() {
      return {
        content: '',//富文本中数据
        editorOption: {
          // 富文本中的一些属性
          modules: {
            toolbar: [
              [{'size': ['small', false, 'large']}],
              ['bold', 'italic'],
              [{'list': 'ordered'}, {'list': 'bullet'}],
              ['link', 'image'],
              ['blockquote', 'code-block']
            ]
          }
        }
      }
    },
    mounted() {
      console.log('app init, my quill insrance object is:', this.myQuillEditor)
      /*setTimeout(() => {
        this.content = 'i am changed'
      }, 3000)*/
    },
    methods: {
      onEditorChange({ editor, html, text }) {//内容改变事件
        console.log('editor change!', editor, html, text)
        this.content = html
      },
      onEditorBlur(editor) {//失去焦点事件
        console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {//获得焦点事件
        console.log('editor focus!', editor)
      },
      onEditorReady(editor) {//准备编辑器
        console.log('editor ready!', editor)
      },
      save(){//提交
          //....
      }
    }
  }
</script>
<style>
  .quill-editor {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
  }
</style>