Iblog项目中博文的文本编辑器采用了vue-quill-editor插件，本文将简单介绍其使用方法。
引入配置
- 安装模块
npm install vue-quill-editor --save
- index.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)
注意必须引入样式，否则会出现编辑器排版的混乱。
- 组件中注册
// 在<script></script>之间插入
import { quillEditor, Quill } from 'vue-quill-editor'
// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'color': []}, {'background': []}],
[{'align': []}],
['link', 'image'],
['clean'],
[{'size': ['small', false, 'large', 'huge']}],
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'font': []}]
]
export default {
data () {
return {
...
editorOption: {
placeholder: '提示语',
modules: {
toolbar: {
container: toolbarOptions,
...
}
}
}
...
}
},
...
components: {
'quill-editor': quillEditor
},
...
}
- 使用组件
<div class="quill-box">
<template>
<quill-editor v-model="content"
:options="editorOption"
ref="content">
</quill-editor>
</template>
</div>
经过上述配置即可使用quill富文本编辑器了。
更改图片按钮的事件函数
由于quill插件默认插入图片是base64格式的，若图片较大会引起内容太大无法保存到数据库里面，这样为了上传图片或者插入网络图片，要先更改图片按钮的事件下函数，具体是在editorOption->modules->toolbar中加入handlers对象，并插入名称为image的函数，函数的内容设定为自身所需内容，如下
data () {
return {
content: '',
editorOption: {
...
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
'image': function (value) {
if (value) {
// 自定义内容
} else {
this.quill.format('image', false)
}
}
}
}
}
}
}
插入图片网络图片
若想插入来自网络的图片，即提供图片网址，可以加入以下语句
const range = this.quill.getSelection()
const value = prompt('提示语')
this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER)
但是这种方法嵌入的图片暂时不支持调整图片大小。
使用样式渲染内容
使用该插件所保存的内容需经过原样式渲染才能还原编辑时的效果，配置方法为，在<div>标签中加入ql-editor样式，并且内容需为html格式呈现
<div class="ql-editor" v-html="articleContent"></div>