vue wangEditor插入变量,并且按下backspace键完整删除变量

最新推荐文章于 2023-11-14 10:16:59 发布

搬砖的二胖子

最新推荐文章于 2023-11-14 10:16:59 发布

阅读量591

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46096120/article/details/128973305

版权

html 代码

		<div class="layout-left-content">
              <div style="border: 1px solid #ccc;user-select: none;" >
                <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  :editor="editor"
                  :default-config="toolbarConfig"
                  :mode="mode"
                />
                <Editor
                  id="editor"
                  ref="editor"
                  v-model="offerContent"
                  :style="{ height: richTextHeight + 'px', overflowY: 'hidden' }"
                  :default-config="editorConfig"
                  :mode="mode"
                  @onCreated="onCreated"
                  @onFocus="onFocus"
                />
              </div>
              <div class="button-title">
                插入标签:
              </div>
              <div class="button-box" style="margin-top: 8px">
                <el-button v-for="item in buttonList" :key="item.id" :class="{'selected-button': buttonIdSelected.includes(item.id)}" @click="buttonActive(item.text, item.id, item.label)">{{ item.label }}</el-button>
              </div>
            </div>

script代码

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
	components: {  Editor, Toolbar},
	data() {
    	return {
    		buttonList: [
        		{ id: 0, text: "#{candidateName}", label: "候选人姓名" },
        		{ id: 1, text: "#{candidateCompany}", label: "候选公司主体" },
        		{ id: 2, text: "#{candidateDepart}", label: "入职部门" },
        		{ id: 3, text: "#{link}", label: "Offer确认链接" },
       			{ id: 4, text: "#{initiateName}", label: "发起人姓名" },
       		 	{ id: 5, text: "#{initiateCenter}", label: "发起人中心" },
        		{ id: 6, text: "#{initiateDepart}", label: "发起人部门" },
        		{ id: 7, text: "#{initiatePhone}", label: "发起人联系方式" },
        		{ id: 8, text: "#{initiateMail}", label: "发起人邮箱" },
        		{ id: 9, text: "#{accessory}", label: "附件名称" }
      		],
      		 backSpaceList: [" 候选人姓名 ", " 候选公司主体 ", " 入职部门 ", " Offer确认链接 ", " 发起人姓名 ", " 发起人中心 ", " 发起人部门 ", " 发起人联系方式 ", " 发起人邮箱 ", " 附件名称 "], // 删除键直接删除变量
    	}
    }
    created() { // 监听backspace键
    	const _this = this;
    	document.onkeydown = function(e) {
      	const key = window.event.keyCode;
      	if (key === 8) {
        	var bodyText = _this.$refs.editor.$el;
        	const obj = _this.getDeleteInfo(bodyText);
        	_this.deleteVariable(obj);
      		}
   	 	};
	 },
	  methods: {
	  	// 删除变量
	    deleteVariable(obj) {
	      console.log(obj);
	      if (this.backSpaceList.some(item => item.includes(obj.delData)) && obj.delData.length > 4) {
	        for (let i = 0; i < obj.delLength - 1; i++) {
	          this.editor.deleteBackward();
	        }
	      }
	    },
	    // 获取删除内容
	    getDeleteInfo(ctrl) {
	      const obj = {
	        delData: "",
	        delLength: ""
	      };
	      if (ctrl) {
	        if (window.getSelection && document.createRange) {
	          ctrl.focus();
	          var Sel = window.getSelection();
	          if (Sel.focusNode.data) {
	            obj.delData = Sel.focusNode.data;
	            obj.delLength = Sel.focusNode.data.length;
	          }
	        }
	      }
	      return (obj);
	    },
	    // 插入按钮点击
	    buttonActive(text, id, label) {
	      if (this.isRichTextFocus) {
	        if (String(text) === "#{link}") {
	          this.editor.dangerouslyInsertHtml(`<span>${" "}</span><span style="color: rgb(45, 140, 240);cursor: pointer"> ${label} </span><span>${" "}</span>`);
	        } else if (String(text) === "#{accessory}" && this.editor.getHtml().includes("附件名称")) {
	          return false;
	        } else {
	          this.editor.dangerouslyInsertHtml(`<span>${" "}</span> <u> ${label} </u><span>${" "}</span>`);
	          // this.editor.dangerouslyInsertHtml(`<span>${" "}</span><span style="color: rgb(128, 134, 149);cursor: pointer"> <u> ${label} </u> </span><span>${" "}</span>`);
	          // this.editor.dangerouslyInsertHtml(`<span>${" "}</span><span style="color: rgb(45, 183, 245);cursor: pointer"> <u> ${label} </u> </span><span>${" "}</span>`);
	        }
	      }
	    },
	  }
}