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

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

1 官方文档:传送门

2 使用步骤

1) yarn安装

yarn add vue-quill-editor

2) 在main.js中引入

import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
//也可以按需引入
// 通过es6按需导入方式 导入需要的组件模块
//import { quillEditor } from 'vue-quill-editor'

如果是使用按需引入的话,还需要在组件中注册

components: {
// 简易成员赋值 quillEditor: quillEditor
// 组件使用两种方式：<quillEditor></quillEditor> 或 <quill-editor></quill-editor>
quillEditor
},

3) 在模块中使用

直接使用quill-editor标签就好

<template>
  <div class="edit_container">
  <quill-editor 
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
  </quill-editor>
    <button v-on:click="saveHtml">保存</button>
  </div>
</template> 
<script>
import {
    quillEditor } from 'vue-quill-editor'
export default {
   
  name: