在公司项目中,富文本编辑器是必不可少的一个功能,主要用于表单创建中对创建项的描述。本文中介绍的 vue-quill-edittor
在 PC
端和移动端都有着不错的显示效果,还可以根据自己的需求进行设置不同的配置项。接下来我们一起来了解一下怎么使用!
安装
npm install vue-quill-editor
yarn add vue-quill-editor
全局引用
// 全局挂载 VueQuillEditor
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)
局部(组件)引用
// 引入样式和quillEditor
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 注册 quillEditor
components: {
quillEditor
},
这里展示局部使用的代码
<template>
<div class="local-quill-editor">
<quill-editor
ref="myLQuillEditor"
v-model="content"
:options="editorOption"
class="editor"
@blur="onEditorBlur"
@focus="onEditorFocus"
@change="onEditorChange">
>
</quill-editor>
</div>
</template>
<script>
// 引入样式和quillEditor
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 工具栏配置项
const toolbarOptions = [
// 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
['bold', 'italic', 'underline', 'strike'],
// 引用 代码块-----['blockquote', 'code-block']
['blockquote', 'code-block'],
// 1、2 级标题-----[{ header: 1 }, { header: 2 }]
[{ header: 1 }, { header: 2 }],
// 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ list: 'ordered' }, { list: 'bullet' }],
// 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
[{ script: 'sub' }, { script: 'super' }],
// 缩进-----[{ indent: '-1' }, { indent: '+1' }]
[{ indent: '-1' }, { indent: '+1' }],
// 文本方向-----[{'direction': 'rtl'}]
[{ direction: 'rtl' }],
// 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
[{ size: ['small', false, 'large', 'huge'] }],
// 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ header: [1, 2, 3, 4, 5, 6, false] }],
// 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
[{ color: [] }, { background: [] }],
// 字体种类-----[{ font: [] }]
[{ font: [] }],
// 对齐方式-----[{ align: [] }]
[{ align: [] }],
// 清除文本格式-----['clean']
['clean'],
// 链接、图片、视频-----['link', 'image', 'video']
['image', 'video']
]
export default {
name: 'LocalQuillEditor',
// 注册 quillEditor
components: {
quillEditor
},
data () {
return {
content: '',
editorOption: {
modules: {
toolbar: toolbarOptions
},
theme: 'snow',
placeholder: '请输入正文'
// Some Quill optiosn...
}
}
},
methods: {
// 失去焦点事件
onEditorBlur (e) {
console.log('onEditorBlur: ', e)
},
// 获得焦点事件
onEditorFocus (e) {
console.log('onEditorFocus: ', e)
},
// 内容改变事件
onEditorChange (e) {
console.log('onEditorChange: ', e)
}
}
}
</script>
<style scoped lang="scss">
.editor {
height: 500px;
}
</style>
效果如下:
pc端
移动端
注意事项:
该插件由于插入的图片是base64格式的的,所以会导致请求参数字符串长度过大,后端会处理异常,
所以需要结合上传组件进行特殊处理,简单概括就是上传之后将oss服务器返回的的远程图片地址插入到富文本编辑器中,这样就可以完美解决
这里只展示往富文本编辑器中插入图片的写法
// 编辑器 - 上传文件
uploadFile(info) {
let quill = this.$refs.QuillEditor.quill
if (info.file.status === 'uploading') {
return
}
if (info.file.status === 'done') {
if (info.file.response.errno === 0) {
// 获取光标所在位置
let length = quill.getSelection().index
// 插入文件,res为服务器返回的文件链接地址
quill.insertEmbed(length, 'link', {href: info.file.response.data, innerText: info.file.name}) //**注意这里 - 插入文件地址的方式**
// 调整光标到最后
quill.setSelection(length + 1)
}
}
}