# 前言
富文本编辑器有很多，比如 UEditor、Simditor、wangEditor、CKEditor、TinyMCE、Froala、Quill 等各种各样的。
我们今天主要介绍下 vue-quill-editor 以及如何自定义上传图片。
安装
npm install vue-quill-editor -S
npm install quill -S
引入
main.js 全局引入
import Vue from 'vue'
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)
=============================================
单个页面引入
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 },
}
配置
配置功能按钮
html
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" style="height: 200px" />
js
editorOption: {
placeholder: "请在这里输入",
modules: {
toolbar: {
container: [
['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'
]
}
}
}
可根据项目需要自行删减
效果图如下
image.png
新增显示Html源码功能
- 创建
quill.eeSourceBtn.js内容如下
class eeSourceBtn {
constructor(quill, options) {
let theClass = this;
theClass.addDom(quill);
quill.on('text-change', (delta, oldDelta, source) => {
theClass.replaceSourceEditorContent(quill)
})
//create btn
let button = document.createElement("button");
//display button text
button.innerHTML = "html";
button.onclick = function() {
theClass.showSourceEditor(quill);
};
//create btn container
let buttonContainer = document.createElement("span");
buttonContainer.setAttribute("class", "ql-formats ee-flag-source");
buttonContainer.appendChild(button);
//add to toolbar
quill.container.previousSibling.appendChild(buttonContainer);
}
//add dom for source editor
addDom(quill) {
if (!quill.container.querySelector(".ql-ee-source")) {
var txtArea = document.createElement('textarea');
txtArea.style.cssText = "width: 100%;margin: 0px;background: rgb(249, 249, 249);box-sizing: none;font-size: 13px;outline: none;padding: 12px 15px;line-height: 1.42;font-family: Consolas, Menlo, Monaco, "Courier New", monospace;position: absolute;top: 0;bottom: 0;border: none;"
var htmlEditor = quill.addContainer('ql-ee-source')
htmlEditor.style.cssText = "display:none";
htmlEditor.appendChild(txtArea)
}
}
//for quill editor switch
replaceSourceEditorContent(quill) {
let quillEditor = quill.container.querySelector(".ql-editor");
let sourceContainer = quill.container.querySelector(".ql-ee-source");
let sourceEditor = sourceContainer.querySelector('textarea');
sourceEditor.value = quillEditor.innerHTML;
}
//add html DOM, show/hide, save event
showSourceEditor(quill) {
//1. find quill editor
let quillEditor = quill.container.querySelector(".ql-editor");
let sourceContainer = quill.container.querySelector(".ql-ee-source");
let sourceEditor = sourceContainer.querySelector('textarea');
//show/hide editor, value transfer
if (sourceContainer.style.display === 'none') {
//show source editor
sourceContainer.style.display = '';
sourceEditor.value = quillEditor.innerHTML;
} else {
//hidden source ditor
sourceContainer.style.display = 'none';
//set source content to quill editor
quillEditor.innerHTML = sourceEditor.value;
}
}
}
window.eeSourceBtn = eeSourceBtn;
export default eeSourceBtn;
export { eeSourceBtn };
- 页面引入
import { Quill } from "vue-quill-editor";
import { eeSourceBtn } from '../quill.eeSourceBtn.js';
// 注册我们写的事件
Quill.register( 'modules/eeSourceBtn', eeSourceBtn );
- 在配置项里加入我们的新增的事件
editorOption: {
placeholder: "请在这里输入",
modules: {
eeSourceBtn: eeSourceBtn, // 引入我我们新增的事件
toolbar: {
container: [...这里是我们之前配置的功能按钮项]
}
}
}
效果图如下
1640763608(1).png
多了显示
Html源码的标识
自定义上传图片
问：为什么要自定义上传图片呢？
答：默认是base64格式图片，可自定义上传至文件服务器或OSS等。
这里依赖element-ui的上传插件，所以我们得配置一下
安装
npm install element-ui -S
main.js 引入
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(Element);
开始写自定义上传图片
// html
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" style="height: 200px" />
<!-- 用于配合编辑器自定义上传图片 -->
<el-upload class="QuillEditor-uploader" action :before-upload="QuillEditorUpload" v-show="0" />
// js
editorOption: {
placeholder: "请在这里输入",
modules: {
eeSourceBtn: eeSourceBtn,
toolbar: {
container: [...这里是我们之前配置的功能按钮项],
// 自定义上传图片
handlers: {
'image': function ( value ) {
if ( value ) {
// 触发上传插件
document.querySelector('.QuillEditor-uploader .el-upload__input').click()
} else {
this.quill.format( 'image', false );
}
}
}
}
}
}
// 调用接口上传
QuillEditorUpload(){
let fd = new FormData();
fd.append( 'file', f )
upload( fd ).then( res => {
if ( res.isSuccess ){
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片，res.resultMsg 为服务器返回的图片链接地址
quill.insertEmbed(length, 'image', res.resultMsg)
// 调整光标到最后
quill.setSelection(length + 1)
}
} )
}
其他方法
编辑器还提供了其他方法供大家使用：
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
