小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金。
A journey of a thousand miles begins with single step
背景
在公司项目中,富文本编辑器是必不可少的一个功能,主要用于表单创建中对创建项的描述。本文中介绍的 vue-quill-edittor
在 PC
端和移动端都有着不错的显示效果,还可以根据自己的需求进行设置不同的配置项。接下来我们一起来了解一下怎么使用!
安装
# use npm
npm install vue-quill-editor
# use yarn
yarn add vue-quill-editor
注:该插件是基于 Quill
的,无需下载 Quill
,因为在安装 vue-quill-editor
时,会把所需的依赖进行统一安装。
引入
全局引用
在 main.js
中引入插件
// 全局挂载 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
},
由以上代码可以看到全局应用和在组件中引入的方式是不一样的,全局引用采用的是
import
直接引入,局部引用时导出一个对象在对象中得到quillEditor
,这里我们可以看一下源码,发现源码中不仅默认导出了VueQuillEditor
,还道出了一个包含quillEditor
的对象。
全局引用
:import VueQuillEditor from 'vue-quill-editor'
局部引用
:import { quillEditor } from 'vue-quill-editor'
/*
* Vue-Quill-Editor index.js
* Author: surmon@foxmail.com
* Github: https://github.com/surmon-china/vue-quill-editor
*/
import _Quill from 'quill'
import quillEditor from './editor.vue'
const Quill = window.Quill || _Quill
const install = (Vue, globalOptions) => {
if (globalOptions) {
quillEditor.props.globalOptions.default = () => globalOptions
}
Vue.component(quillEditor.name, quillEditor)
}
const VueQuillEditor = { Quill, quillEditor, install }
export default VueQuillEditor
export { Quill, quillEditor, install }
使用
这里展示局部使用的代码
<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端
移动端
案例代码
- 全局使用:gitee.com/yunxii/vue-…
- 局部使用:gitee.com/yunxii/vue-…