博客

vue-quill-editor自定义tabar菜单


上一篇因为contenteditable IE的insertText 有兼容问题 ，所以重新用vue-quill-editor插件

效果图

这里tabbar 全部自定义了

代码如下

<template>
  <div class="rich-text-area">
    <quill-editor
      v-model="content"
      :options="editorOption"
      ref="myQuillEditor"
      @change="onEditorChange($event)"
    ></quill-editor>
    <div class="wordNumber">{{ totalStrLength }}/800</div>

    <div class="faceNav" v-if="showFace">
      <img
        v-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:{
   // 富文本的placeholder
   placeholder:{
     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>