Vue-Quill-Editor 是一个基于 Quill
、适用于 Vue
的富文本编辑器,支持服务端渲染和单页应用。
该插件只兼容 IE10 以上,不能向下兼容,如果要向下兼容,只能放弃使用这个插件。
一、实现效果:
二、使用方法:
1. 下载 Vue-Quill-Editor
npm install vue-quill-editor --save
2. 下载 Quill(Vue-Quill-Editor 需要依赖)
npm install quill --save
也可以使用 CDN 的方式引入,具体使用见官网:Vue-Quill-Editor - npm
3. 挂载
我们在项目开发中,一般是将富文本编辑器直接封装成组件使用,所以我们一般在组件中直接挂载即可!
3.1 全局中挂载
// main.js
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
Vue.use(VueQuillEditor, /* { default global options } */)
3.2 组件中挂载(推荐)
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}
4. 组件开发
4.1 基本框架使用
<template>
<div class="edit_container">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
components: {
quillEditor
},
data() {
return {
content: `富文本编辑器内容`, // 富文本编辑器默认内容
editorOption: {} // 富文本编辑器配置
}
},
methods: {
// 准备编辑器
onEditorReady(editor) {
console.log('editor ready!', editor)
},
// 失去焦点事件
onEditorBlur(editor){
console.log('editor blur!', editor)
},
// 获得焦点事件
onEditorFocus(editor){
console.log('editor focus!', editor)
},
// 内容改变事件
onEditorChange({ quill, html, text }){
console.log('editor change!', quill, html, text)
this.content = html
},
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
}
}
</script>
4.2 扩展开发
-
自定义
toolbar
工具栏// 工具栏配置 const toolbarOptions = [ ["bold", "italic", "underline", "strike"], //加粗,斜体,下划线,删除线 ["blockquote", "code-block"], //引用,代码块 [{ header: 1 }, { header: 2 }], // 标题,键值对的形式;1、2表示字体大小 [{ list: "ordered" }, { list: "bullet" }], //列表 [{ script: "sub" }, { script: "super" }], // 上下标 [{ indent: "-1" }, { indent: "+1" }], // 缩进 [{ direction: "rtl" }], // 文本方向 [{ size: ["small", false, "large", "huge"] }], // 字体大小 [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题 [{ color: [] }, { background: [] }], // 字体颜色,字体背景颜色 [{ font: [] }], //字体 [{ align: [] }], //对齐方式 ["clean"], //清除字体样式 ["image", "video"], //上传图片、上传视频 ];
-
汉化工具栏
主要通过修改css
样式配置来实现工具栏的汉化处理。<style> .ql-snow .ql-tooltip[data-mode="link"]::before { content: "请输入链接地址:"; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0px; content: "保存"; padding-right: 0px; } .ql-snow .ql-tooltip[data-mode="video"]::before { content: "请输入视频地址:"; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "14px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { content: "10px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { content: "18px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { content: "32px"; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: "文本"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: "标题1"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: "标题2"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: "标题3"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { content: "标题4"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { content: "标题5"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { content: "标题6"; } .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: "标准字体"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { content: "衬线字体"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { content: "等宽字体"; } </style>
注意:因为我们是在组件内写的样式,所以要删除
style
中的lang=‘scss’ scoped
中的scoped
,使样式全局生效。 -
data
选项中的配置data() { return { content: ``, // 富文本编辑器默认内容 // 富文本编辑器配置 editorOption: { modules: { toolbar: toolbarOptions, // 自定义工具栏,与上面定义的toolbarOptions 相对应 }, theme: "snow", //主题 placeholder: "请输入正文", }, }; },
至此,通过以上配置,插件 Vue-Quill-Editor
就可以轻松使用了,但是在使用过程中肯定会有很多其他问题,在这里我并没有进行整理,如果有其他问题,欢迎小伙伴留言讨论。
完整版代码我已经上传 GitHub,需要的小伙伴自取。
参考文章:
感谢原作者,如有侵权,请联系删除。