修改
This commit is contained in:
辉
parent
4045310722
commit
9d0db56c87
@ -1,47 +1,23 @@
|
||||
<template>
|
||||
<div style="border: 1px solid #ccc">
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editor"
|
||||
:defaultConfig="toolbarConfig"
|
||||
:mode="mode"
|
||||
/>
|
||||
<Editor
|
||||
style="height: 500px; overflow-y: hidden"
|
||||
v-model="html"
|
||||
:defaultConfig="editorConfig"
|
||||
:mode="mode"
|
||||
@onChange="onChange"
|
||||
@onCreated="onCreated"
|
||||
@onFocus="handleFocus"
|
||||
/>
|
||||
<el-dialog
|
||||
title="添加画像标签字段"
|
||||
:visible.sync="labelshow"
|
||||
width="40%"
|
||||
:before-close="beforeClose"
|
||||
class="category-cascader-panel"
|
||||
>
|
||||
<el-cascader-panel
|
||||
:key="isResouceShow"
|
||||
:options="labeloptions"
|
||||
@change="panelchange"
|
||||
v-if="labelshow"
|
||||
ref="cascaderAddaddlist"
|
||||
v-model="selectedOptions"
|
||||
:props="{
|
||||
value: 'value',
|
||||
label: 'label',
|
||||
children: 'children',
|
||||
checkStrictly: false,
|
||||
multiple: true,
|
||||
}"
|
||||
></el-cascader-panel>
|
||||
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
|
||||
<Editor style="height: 500px; overflow-y: hidden" v-model="html" :defaultConfig="editorConfig" :mode="mode"
|
||||
@onChange="onChange" @onCreated="onCreated" @onFocus="handleFocus" />
|
||||
<el-dialog title="添加画像标签字段" :visible.sync="labelshow" width="40%" :before-close="beforeClose"
|
||||
class="category-cascader-panel">
|
||||
<el-cascader-panel :key="isResouceShow" :options="labeloptions" @change="panelchange" v-if="labelshow"
|
||||
ref="cascaderAddaddlist" v-model="selectedOptions" :props="{
|
||||
value: 'value',
|
||||
label: 'label',
|
||||
children: 'children',
|
||||
checkStrictly: false,
|
||||
multiple: true,
|
||||
}"></el-cascader-panel>
|
||||
<div>
|
||||
<div style="margin: 20px 0">结果预览:</div>
|
||||
|
||||
<div v-for="(item, index) of addlist" :key="index">
|
||||
<div>{{ item }}</div>
|
||||
<div>{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
@ -49,25 +25,15 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="添加知识库字段"
|
||||
:visible.sync="fieldshow"
|
||||
width="50%"
|
||||
:before-close="beforeClose"
|
||||
class="category-cascader-panel"
|
||||
>
|
||||
<el-cascader-panel
|
||||
:options="fieldoptions"
|
||||
@change="handleChange($event)"
|
||||
:props="{
|
||||
value: 'termCode',
|
||||
label: 'termContent',
|
||||
children: 'children',
|
||||
checkStrictly: false,
|
||||
multiple: true,
|
||||
}"
|
||||
ref="cascaderAddr"
|
||||
>
|
||||
<el-dialog title="添加知识库字段" :visible.sync="fieldshow" width="50%" :before-close="beforeClose"
|
||||
class="category-cascader-panel">
|
||||
<el-cascader-panel :options="fieldoptions" @change="handleChange($event)" :props="{
|
||||
value: 'termCode',
|
||||
label: 'termContent',
|
||||
children: 'children',
|
||||
checkStrictly: false,
|
||||
multiple: true,
|
||||
}" ref="cascaderAddr">
|
||||
</el-cascader-panel>
|
||||
|
||||
<div style="margin: 20px 0">结果预览:</div>
|
||||
@ -223,43 +189,39 @@ export default {
|
||||
this.$emit("on-nodeContent", { nodeContent: this.html });
|
||||
},
|
||||
panelchange(value) {
|
||||
// console.log(value, "value");
|
||||
this.addlist = [];
|
||||
|
||||
value.forEach((e) => {
|
||||
// console.log(e, "eeeeee");
|
||||
this.labeloptions.forEach((el) => {
|
||||
el.children.forEach((ele) => {
|
||||
if (e[1] == ele.value) {
|
||||
console.log(e[1], "[1]");
|
||||
this.addlist.push(el.label + "-" + ele.label);
|
||||
// console.log(this.addlist, "this.addlist");
|
||||
this.addlist.push({
|
||||
lebel: el.label + "-" + ele.label,
|
||||
fileName: el.label,
|
||||
fileSpan: ele.label,
|
||||
fieldMark: ele.termCode
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
labelclick() {
|
||||
this.labelshow = false;
|
||||
setTimeout(() => {
|
||||
this.editor.focus();
|
||||
}, 30);
|
||||
setTimeout(() => {
|
||||
this.editor.deleteBackward();
|
||||
}, 50);
|
||||
this.editor.focus();
|
||||
setTimeout(() => {
|
||||
if (this.modify) {
|
||||
this.modify = false;
|
||||
this.editor.deleteBackward();
|
||||
}
|
||||
this.addlist.forEach((e) => {
|
||||
const resume = {
|
||||
// JS 语法
|
||||
type: "attachment",
|
||||
fileName: e.split("-")[0],
|
||||
fileSpan: e.split("-")[1],
|
||||
children: [{ text: "" }], // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！
|
||||
};
|
||||
const resume = { // JS 语法
|
||||
type: 'attachment',
|
||||
link: '',
|
||||
fileName: e.fileName,
|
||||
fileSpan: e.fileSpan,
|
||||
fieldMark: e.fieldMark,
|
||||
children: [{ text: '' }], // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！
|
||||
}
|
||||
this.editor.insertNode(resume);
|
||||
});
|
||||
// this.addlist = [
|
||||
@ -271,6 +233,7 @@ export default {
|
||||
// ];
|
||||
this.editor.focus();
|
||||
++this.isResouceShow;
|
||||
this.selectedOptions = []
|
||||
}, 100);
|
||||
},
|
||||
fieldclick() {
|
||||
@ -536,7 +499,7 @@ function renderAttachment(elem, children, editor) {
|
||||
background: "#E5F5F2",
|
||||
padding: "5px 10px" /* 其他... */,
|
||||
}, // style ，驼峰式写法
|
||||
on: { click() {} /* 其他... */ },
|
||||
on: { click() { } /* 其他... */ },
|
||||
},
|
||||
// img 没有子节点，所以第三个参数不用写
|
||||
[fileSpan, iconVnode]
|
||||
@ -552,7 +515,7 @@ function renderAttachment(elem, children, editor) {
|
||||
background: "#009A82",
|
||||
padding: "5px 10px" /* 其他... */,
|
||||
}, // style ，驼峰式写法
|
||||
on: { click() {} /* 其他... */ },
|
||||
on: { click() { } /* 其他... */ },
|
||||
},
|
||||
// img 没有子节点，所以第三个参数不用写
|
||||
[fileName, nameiconVnode]
|
||||
@ -566,7 +529,7 @@ function renderAttachment(elem, children, editor) {
|
||||
props: { contentEditable: false, class: "text" }, // HTML 属性，驼峰式写法
|
||||
style: {}, // style ，驼峰式写法
|
||||
on: {
|
||||
click() {} /* 其他... */,
|
||||
click() { } /* 其他... */,
|
||||
},
|
||||
},
|
||||
// 子节点
|
||||
@ -623,7 +586,7 @@ function renderAttachmenttwo(elem, children, editor) {
|
||||
click() {
|
||||
that.modify = true;
|
||||
that.fieldshow = true;
|
||||
this.add = [];
|
||||
that.add = [];
|
||||
} /* 其他... */,
|
||||
},
|
||||
}
|
||||
@ -640,7 +603,7 @@ function renderAttachmenttwo(elem, children, editor) {
|
||||
background: "#E5F5F2",
|
||||
padding: "5px 10px" /* 其他... */,
|
||||
}, // style ，驼峰式写法
|
||||
on: { click() {} /* 其他... */ },
|
||||
on: { click() { } /* 其他... */ },
|
||||
},
|
||||
// img 没有子节点，所以第三个参数不用写
|
||||
[fileSpan, iconVnode]
|
||||
@ -656,7 +619,7 @@ function renderAttachmenttwo(elem, children, editor) {
|
||||
background: "#436AE9",
|
||||
padding: "5px 10px" /* 其他... */,
|
||||
}, // style ，驼峰式写法
|
||||
on: { click() {} /* 其他... */ },
|
||||
on: { click() { } /* 其他... */ },
|
||||
},
|
||||
// img 没有子节点，所以第三个参数不用写
|
||||
[fileName, nameiconVnode]
|
||||
@ -670,7 +633,7 @@ function renderAttachmenttwo(elem, children, editor) {
|
||||
props: { contentEditable: false, class: "text" }, // HTML 属性，驼峰式写法
|
||||
style: {}, // style ，驼峰式写法
|
||||
on: {
|
||||
click() {} /* 其他... */,
|
||||
click() { } /* 其他... */,
|
||||
},
|
||||
},
|
||||
// 子节点
|
||||
@ -799,11 +762,13 @@ Boot.registerModule(parseHtmlConfmodule);
|
||||
<!-- <style lang="scss">
|
||||
</style> -->
|
||||
|
||||
<style lang="scss" >
|
||||
<style lang="scss">
|
||||
.category-cascader-panel {
|
||||
.el-cascader-panel {
|
||||
|
||||
// background-color: red !important;
|
||||
.el-scrollbar:first-child {
|
||||
|
||||
// li[aria-haspopup="true"] {
|
||||
.el-checkbox {
|
||||
display: none !important;
|
||||
@ -813,35 +778,35 @@ Boot.registerModule(parseHtmlConfmodule);
|
||||
}
|
||||
</style>
|
||||
// ::v-deep .el-textarea__inner {
|
||||
// color: black !important;
|
||||
// background-color: #fff !important;
|
||||
// cursor: default !important;
|
||||
// color: black !important;
|
||||
// background-color: #fff !important;
|
||||
// cursor: default !important;
|
||||
// }
|
||||
// ::v-deep .el-cascader-panel {
|
||||
// ::v-deep.el-scrollbar:first-child {
|
||||
// ::v-deep .el-checkbox {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
// ::v-deep.el-scrollbar:nth-child(2) {
|
||||
// ::v-deep.el-checkbox {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
// ::v-deep.el-scrollbar:first-child {
|
||||
// ::v-deep .el-checkbox {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
// ::v-deep.el-scrollbar:nth-child(2) {
|
||||
// ::v-deep.el-checkbox {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .path-tag-wrap {
|
||||
// font-size: 18px;
|
||||
// line-height: 32px;
|
||||
// border-radius: 5px;
|
||||
// font-size: 18px;
|
||||
// line-height: 32px;
|
||||
// border-radius: 5px;
|
||||
// }
|
||||
// parseElemHtml: parseAttachmentHtml,
|
||||
// parseElemHtml: parseAttachmentHtml,
|
||||
// }
|
||||
// const parseHtmlConftwo = {
|
||||
// selector: 'span[data-w-e-type="attachmenttwo"]', // CSS 选择器，匹配特定的 HTML 标签
|
||||
// parseElemHtml: parseAttachmentHtmltwo,
|
||||
// selector: 'span[data-w-e-type="attachmenttwo"]', // CSS 选择器，匹配特定的 HTML 标签
|
||||
// parseElemHtml: parseAttachmentHtmltwo,
|
||||
// }
|
||||
// const parseHtmlConfmodule = {
|
||||
// parseElemsHtml: [parseHtmlConf, parseHtmlConftwo] // parseElemHtml
|
||||
// parseElemsHtml: [parseHtmlConf, parseHtmlConftwo] // parseElemHtml
|
||||
// }
|
||||
// Boot.registerModule(parseHtmlConfmodule)
|
||||
// <!-- </script> -->
|
||||
|
||||
@ -702,20 +702,6 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
/*滚动条宽度*/
|
||||
height: 6px;
|
||||
/*滚动条高度*/
|
||||
background: #C1C1C1;
|
||||
border-radius: 10px;
|
||||
/*滚动条的背景区域的圆角*/
|
||||
|
||||
// box-shadow: 0px 1px 3px #232335 inset;
|
||||
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-table {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user