npm install vue-quill-editor --save

2、新建plugins/vue-quill-editor.js文件

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

3、配置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
    }
  ]
}

4、组件中使用

<template>
<div>
  <section class="container">
    <div class="quill-editor" 
         :content="content"
         @change="onEditorChange($event)"
         @blur="onEditorBlur($event)"
         @focus="onEditorFocus($event)"
         @ready="onEditorReady($event)"
         v-quill:myQuillEditor="editorOption">
    </div>
  </section>
  <div class="editor-uploader">
    <input type="file" accept="image/*" @change="onUploadHandler"/>
 </div>
</div>
</template>

<script>
  export default {
    data () {
      return {
        content: '<p>I am Example</p>',
        editorOption: {
          // some quill options
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
          ['blockquote', 'code-block'], // 引用  代码块
          [{ header: 1 }, { header: 2 }], // 1、2 级标题
          [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
          [{ script: 'sub' }, { script: 'super' }], // 上标/下标
          [{ indent: '-1' }, { indent: '+1' }], // 缩进
          [{ direction: 'rtl' }], // 文本方向
          [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
          [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
          [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
          // [{ font: ['songti'] }], // 字体种类
          [{ align: [] }], // 对齐方式
          ['clean'], // 清除文本格式
          ['image', 'video'] // 链接、图片、视频
            ],
            handlers: {
          'image': function (value) {
            if (value) { // value === true
              document.querySelector('.editor-uploader input').click()
            
            }
          }
        }
          }
        }
      }
    },
   
    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
      },

      // 编辑器上传图片
    async onUploadHandler(e) {
            var file = e.target.files[0]
            var _this = this
            var param = new Object()
            param.type=conf.fileType.editImage
            param.obj_id=this.id
            conf.upfileCallback(this.$axios,file,qiniu,param,(res)=>{
               
                const imageUrl = conf.qiniuHost+res.key
          
                // 获取光标所在位置
                let quill = _this.myQuillEditor
                
                let length = quill.getSelection().index
               
                // 插入图片  
                quill.insertEmbed(length, 'image', imageUrl)


                // // 调整光标到最后
                quill.setSelection(length + 1)


            })
            
    },


    }
  }
</script>
<style lang="scss" scoped>
  .container {
    width: 60%;
    margin: 0 auto;
    padding: 50px 0;
    .quill-editor {
      min-height: 200px;
      max-height: 400px;
      overflow-y: auto;
    }
  }
</style>