vue 项目开发中，文本编辑器的选择很多，一些熟悉的文本编辑器都可以使用，如UEditor、wangEditor，这里介绍基于 vue 的一个文本编辑器插件 vue-quill-editor

此插件基于 quill，所以使用 cdn 节点方式引用时，还需要引用 quill.js

使用 npm 安装时，只需要安装 vue-quill-editor即可，因为会自动下载依赖

npm install vue-quill-editor --save

1、简单使用

可以全局或者在组件内部使用

我们这里全局使用

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)

组件中使用如下代码，引入编辑器

<quill-editor v-model="goodsForm.introduce" ref="myQuillEditor" ></quill-editor>

现在，插件就可以使用了

问题：图片是以 base64 编码格式存储的，而不是图片的服务器路径

2、上传图片

vue-quill-editor 有一个图片上传的模块，但是因为已经不更新了，所以不建议使用

解决方法：自定义图片上传组件，具体来说

• 使用 el-upload 作为上传组件
• 默认情况下，此组件隐藏
• 点击 vue-quill-editor 中的图片按钮时，触发 el-upload 组件的单击事件，打开文件选择框
• 上传成功后，获取图片地址，插入到光标处

加入el-upload

在 vue-quill-editor 下方加入如下代码

<el-uploaddragmultiple:headers="reqtHeader"class="quill-upload":on-success="quillSuccess":action="uploadUrl"><!-- <el-button size="small" type="primary">点击上传</el-button> --><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload>

并设置此组件隐藏

设置选项

在 组件data 中加入如下配置

editorOption: {modules: {toolbar: {container: toolbarOptions,handlers: {// 重写点击组件上的图片按钮要执行的代码'image': function (value) {document.querySelector('.quill-upload .el-icon-upload').click()}}}}},

上面用到了 toolbarOptions ，这是定义工具栏的常量

const toolbarOptions = [['bold', 'italic', 'underline', 'strike'], // toggled buttons['blockquote', 'code-block'],[{ header: 1 }, { header: 2 }], // custom button values[{ list: 'ordered' }, { list: 'bullet' }],[{ script: 'sub' }, { script: 'super' }], // superscript/subscript[{ indent: '-1' }, { indent: '+1' }], // outdent/indent[{ direction: 'rtl' }], // text direction[{ size: ['small', false, 'large', 'huge'] }], // custom dropdown[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ color: [] }, { background: [] }], // dropdown with defaults from theme[{ font: [] }],[{ align: [] }],['link', 'image', 'video'],['clean'] // remove formatting button
]

插入图片

quillSuccess(response) {if(response){// 获取文本编辑器const quill=this.$refs.myQuillEditor.quill// 获取光标位置const pos=quill.getSelection().index// 插入图片到光标位置quill.insertEmbed(pos,'image',response.data.url)}else{this.$essage.error('图片插入失败')}},