一、准备工作
1、下载插件
npm install vue-quill-editor 或者 yarn add vue-quill-editor
2、main.js引入
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
二、页面使用
1、定义template模板
<Upload
:on-success="onsuccess"
:format="['jpg','jpeg','png','gif']"
:max-size="2048"
multiple //支持多文件上传
:action="uploadRichTextImg" // 上传接口
style="display:none;"
/>
<quill-editor
v-model="content" // 内容
ref="QuillEditor" // 获取文本节点
:options="editorOption" // 富文本编辑器的工具栏
>
</quill-editor>
2、设置工具栏
const toolbarOptions = [
['bold', 'italic', 'underline'], //加粗、斜体、下划线、删除线, 'strike'
['blockquote', 'code-block'], //引