官方文档地址：https://www.npmjs.com/package/vue-quill-editor

  1. vue项目中，npm安装依赖

    npm install vue-quill-editor --save

  2. 两种引用方法，全局引用和局部引用

全局引用，项目入口文件中（main.js）注册 

import Vue from 'vue'
import quillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(quillEditor)

局部引用，在需调用的vue页面中声明 

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}

3.  附上局部引用代码，关于事件和参数可查阅文档，这里不一一说明

<temple>
<div>
        <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" 
            style="height:600px;"> 
        </quill-editor>
    </div>
</template>
<script>
export default {
    data(){
        return{
            content: '',
            editorOption: {
               placeholder: '编辑文章内容'
             },
        }
    },
    methods:{
        onEditorChange({ editor, html, text }) {
            this.content = html;
        },
    }
}
</script>
最后修改：2021 年 04 月 08 日
© 允许规范转载
如果觉得我的文章对你有用，请点个赞支持一下