vue-quill-editor自定义tabar菜单
上一篇因为contenteditable IE的insertText 有兼容问题 ，所以重新用vue-quill-editor插件
效果图

这里tabbar 全部自定义了
代码如下

<template><div class="rich-text-area"><quill-editorv-model="content":options="editorOption"ref="myQuillEditor"@change="onEditorChange($event)"></quill-editor><div class="wordNumber">{{ totalStrLength }}/800</div><div class="faceNav" v-if="showFace"><imgv-for="item in emojiArr":key="item.icon":src="item.icon"@click="clickEmojiFace(item)"/></div></div>
</template><script>
/* eslint-disable*/
import { emojiArr } from "./emoji";
// import Quill from 'quill'
import * as Quill from "quill"; // 富文本基于quill
import totalEmoji from "../assets/emoji.png";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import "quill-emoji/dist/quill-emoji.css";export default {components: {quillEditor,Quill,},props:{// 富文本的placeholderplaceholder:{default:'请输入',type:String},//富文本的最大输入限制 maxLength:{default:800,type:Number},},mounted() {this.initCustomerNoButton();this.initCustomerNameButton();this.totalStrLength =this.$refs.myQuillEditor.quill.getLength() - 1},data() {return {content: null,qqfaceArr: [],showFace: false,emojiArr,totalEmoji,totalStrLength: 0,curTxtPoint: null, // 光标位置editorOption: {theme: "snow", // 主题placeholder: "请输入",modules: {toolbar: {container: [["emojiFace"], // 表情包["customerName"], // 员工姓名["customerNo"], // 员工工号], //新添加的工具handlers: {// 员工工号得回调customerNo: () => {//新增按钮绑定事件 自定义  调用vue实例上的method   这里注意名字要和上面新增按钮的名字一样this.customerNocallback();},// 员工姓名的回调customerName: () => {this.customerNocallback();},// 表情包emojiFace: () => {this.emojiFacecallback();},},},},},};},methods: {// change事件字符限制onEditorChange(e) {e.quill.deleteText(20, 1);if (this.content == "" || this.content == null) {this.totalStrLength = 0;} else {this.totalStrLength = e.quill.getLength() - 1;}},initCustomerNoButton: function () {//在使用的页面中初始化按钮样式    height: 30px;line-height: 30px;const addBtn = document.querySelector(".ql-customerNo");addBtn.innerText = "【员工工号】";},initCustomerNameButton: function () {//在使用的页面中初始化按钮样式    height: 30px;line-height: 30px;const addBtn = document.querySelector(".ql-customerName");addBtn.innerText = "【员工姓名】";},// initEmojiButton(){// const addBtn = document.querySelector(".ql-emojiFace");//  addBtn.style.cssText = ' width:24px!important;padding:0!important;height: 24px;color: #277cf0!important; line-height: 30px!important;border:none!important;font-size:14px!important;'// },customerNocallback() {let index = this.getCursorPosition();this.setCharacter("yuangong", index);},// 表情包回调emojiFacecallback() {this.showFace = true;},// 插入表情emoji 到文本中clickEmojiFace(face) {this.showFace = false;this.setEmojiIn(face);},//获取当前模板文本域的光标位置getCursorPosition() {this.curTxtPoint =this.$refs.myQuillEditor.quill.selection.savedRange.index;return this.curTxtPoint;},//插入文本的方式setCharacter(str, index) {this.curTxtPoint = "";this.$refs.myQuillEditor.quill.insertText(index, str);},// 插入表情setEmojiIn(face) {let quill = this.$refs.myQuillEditor.quill;// 获取光标所在位置let length = quill.getSelection().index;// 插入图片 res.url为服务器返回的图片地址quill.insertEmbed(length, "image", face.icon);// 调整光标到最后quill.setSelection(length + 1);},},
};
</script><style lang='scss'>
.rich-text-area {margin-left: 20px;.wordNumber {border:1px solid #ccc;border-top: none;line-height: 30px;text-align: right;color:#ccc;
}.ql-toolbar.ql-snow .ql-formats {margin-right: 12px!important;
}
.ql-emojiFace {/* contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。等比例缩放图象到垂直或者水平其中一项填满区域。 */width:24px!important;;padding:0!important;;height: 24px;color: #277cf0!important;;line-height: 30px!important;; border:none!important;;font-size:14px!important;;background: url("../assets/emoji.png") no-repeat top left !important;background-size: 100% 100% !important;
}
.ql-customerName,
.ql-customerNo {width:auto!important;;height: 30px!important;;color: #277cf0!important;;line-height: 30px!important;; padding:0!important;;border:none!important;;font-size:14px!important;;
}
.ql-snow .ql-editor img {max-width: 100%;vertical-align: bottom !important;border: none !important;pointer-events: none !important;/* IE下点击face表情周围会出现8个类似编辑框的小框框  啊啊啊 IE坑死我了; */
}
.ql-container.ql-snow {border-bottom: none;
}.faceNav {width: 345px;height: 230px;padding: 5px;/* border: 1px solid #333; */position: absolute;top: 35px;left: -6px;background-color: rgb(250, 249, 249);z-index: 99;/*display: none;*/
}
.faceNav > .qqface {float: left;cursor: pointer;
}
}
</style>