vue-quill-editor，WangeEitor实现富文本编辑器

目录

vue2---使用vue-quill-editor

1、安装vue-quill-editor模块

2、将vue-quill-editor引入到项目中 

3、创建组件

4、结果展示 

vue3---使用WangEditor

1、安装模块

2、创建组件 

3、结果展示

---

vue2---使用vue-quill-editor

1、安装vue-quill-editor模块

npm install vue-quill-editor -S

2、将vue-quill-editor引入到项目中 

//将其挂载到组件中
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
 
export default {
  components: {
    quillEditor
  }
}

3、创建组件

<template>
  <quill-editor 
    @focus="focusFn($event)"
    class="ql-editor"
    ref="myTextEditor" 
    v-model="config.annoText" :options="editorOption" 
    style="height:350px;"
    @change="onEditorChange($event)"
  ></quill-editor>
  <div class="length-limit">{
  {tiLength}}/200&nbsp;&nbsp;</div>
</template>

<script>
  //配置富文本编辑器内容
  const barOprions = [
      ['undo', 'redo', 'bold&#