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、把富文本编辑器作为一个组件来使用。所以在components目录下创建一个.vue文件，可随便命名。比如 QuillEditor.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>

4、在所需要的pages下的vue页面下进行引用，引用步骤：

//1、导入组件
<script>
import Editor from "@/components/QuillEditor"  //导入组件
export default {
  components: {
    Editor
  }
  }
}
</script>

//2、在模板中调用组件,并进行显示
<template>
  <div>
   <Editor />
  </div>
</template>