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

问题描述：

我们在开发过程中经常会遇到使用富文本编辑器进行操作，当前插件市场上关于富文本的编辑器挺多的，

我们就不一一个介绍了，现在我们主要讲解一些vue-quill-editor富文本编辑器的使用操作和注意事项。

效果图

具体操作使用

1. 安装

npm install vue-quill-editor -S

2. 引入到项目中

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
  }
}

具体使用

<template>
	<el-row v-loading="quillUpdateImg">
  <quill-editor ref="myQuillEditor" v-model="form.name" :options="editorOption">
  </quill-editor>
</el-row>
<!-- elementUI上传图片组件 -->
<el-upload class="avatar-uploader"
           :action="`${this.postUrl}/files/upPost`"
           :show-file-list="false"
           :on-success="handleAvatarSuccess"
           :on-error="handleAvatarError"
           :before-upload="beforeAvatarUpload"