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>`);
}
}
},
}
}