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-upload
drag
multiple
: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('图片插入失败')
}
},