You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
5.6 KiB
140 lines
5.6 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2023-12-11 10:13:36
|
|
@ 备注:
|
|
-->
|
|
<template>
|
|
<div class="app-container">
|
|
<editor id="tinymce" v-model="tinymceHtml" :init="init"></editor>
|
|
<div v-html="tinymceHtml"></div>
|
|
<div>{{ tinymceHtml }}</div>
|
|
<div>{{ removeHtmlTags() }}</div>
|
|
<el-button @click="addTag('','field')">插入内容</el-button>
|
|
<el-button @click="addTag('','func')">插入1内容</el-button>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-collapse v-model="fieldCurCollapse">
|
|
<el-collapse-item :title="group.name" :name="group.id"
|
|
v-for="(group,group_idx) in fieldList" :key="group_idx">
|
|
<div class="item" v-for="(i,idx) in group.children" :key="idx"
|
|
@click="addTag(i,'field')">
|
|
<div class="name">{{i.name}}</div>
|
|
<div class="type" :style="typeColors.find(x=>x.name==i.dataType)?.typeStyle">
|
|
{{i.dataTypeName}}
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-collapse v-model="funcCurCollapse">
|
|
<el-collapse-item :title="group.name" :name="group.id"
|
|
v-for="(group,group_idx) in funcList" :key="group_idx">
|
|
<div class="item" @mouseenter="itemMouseenter(i)" @mouseleave="itemMouseleave"
|
|
v-for="(i,idx) in group.children" :key="idx" @click="addTag(i,'func')">
|
|
<div class="name">{{i.name}}</div>
|
|
<div class="type" :style="typeColors.find(x=>x.name==i.dataType)?.typeStyle">
|
|
{{i.dataTypeName}}
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script lang='ts' setup>
|
|
import confContent from "./conf";
|
|
import typeColors from "./unitcss";
|
|
import { ref, onMounted } from "vue";
|
|
import tinymce from "tinymce/tinymce";
|
|
import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
|
|
import "tinymce/themes/silver/theme";
|
|
import Editor from "@tinymce/tinymce-vue"; // 引入组件
|
|
// 都是富文本插件
|
|
// import "tinymce/icons/default";
|
|
// import "tinymce/plugins/image";
|
|
// import "tinymce/plugins/link";
|
|
// import "tinymce/plugins/code";
|
|
// import "tinymce/plugins/table";
|
|
// import "tinymce/plugins/lists";
|
|
// import "tinymce/plugins/wordcount";
|
|
// 以上所有的样式在 node_modules 下面 tinymce 里面的 plugins 都能找到。
|
|
const tinymceHtml = ref("");
|
|
const init = {
|
|
//初始化数据
|
|
language_url: "/tinymce/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称）
|
|
language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定
|
|
skin_url: "/tinymce/skins/ui/oxide", // 这里引入的样式
|
|
height: 300, // 限制高度
|
|
// plugins: "link lists image code table wordcount", // 富文本插件
|
|
statusbar:false,
|
|
toolbar:false,
|
|
branding: false, // //是否禁用“Powered by TinyMCE”
|
|
menubar: false, //顶部菜单栏显示
|
|
// paste_convert_word_fake_lists: false, // 插入word文档需要该属性
|
|
content_css: "/tinymce/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
|
|
|
|
};
|
|
onMounted(() => {
|
|
tinymce.init({}); // 初始化富文本
|
|
});
|
|
let fieldCurCollapse = ref("");
|
|
let funcCurCollapse = ref("");
|
|
const fieldList = ref(confContent.fieldList);
|
|
const funcList = ref(confContent.funcList);
|
|
|
|
|
|
const inSetInfo = () => {
|
|
tinymceHtml.value = tinymceHtml.value + " <span style= contenteditable='false'>Sum</span>() "
|
|
}
|
|
|
|
function removeHtmlTags() {
|
|
return tinymceHtml.value.replace(/<[^>]*>/g, '');
|
|
}
|
|
|
|
|
|
//添加数据标签
|
|
const addTag = (data:any,type:string) => {
|
|
// console.log("标签样式---1-->",typeColors)
|
|
let viewStyle = type == "field" ? typeColors.find((x) => x.name == data.dataType)?.viewStyle : typeColors.find((x) => x.name == "func")?.viewStyle;
|
|
// console.log("标签样式----->",viewStyle)
|
|
let viewStyleStr = "margin:0 5px;";
|
|
Object.keys(viewStyle).map((key) => {
|
|
let keyStr = key.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
viewStyleStr += `${keyStr}:${viewStyle[key]};`;
|
|
});
|
|
var ed = tinymce.get('tinymce');
|
|
var range = ed.selection.getRng();
|
|
// 创建要插入的内容
|
|
var divNode = ed.getDoc().createElement("span");
|
|
if (type == "field") {
|
|
// range.insertContent(
|
|
// ` <span style="${viewStyleStr}" contenteditable="false">${data.name}</span> `
|
|
// );
|
|
tinymce.activeEditor.execCommand('mceInsertContent', false, `<span style="${viewStyleStr}" contenteditable="false">${data.name}</span>`);
|
|
// tinymceHtml.value = tinymceHtml.value + ` <span style="${viewStyleStr}" contenteditable="false">${data.name}</span> `
|
|
// Editor.insertNode(` <span style="${viewStyleStr}" contenteditable="false">${data.name}</span> `)
|
|
|
|
// divNode.innerHTML = ` <span style="${viewStyleStr}" contenteditable="false">${data.name}</span> `;
|
|
// range.insertNode(divNode);
|
|
} else {
|
|
// tinymce.editors["tinymce"].insertContent(
|
|
// ` <span style="${viewStyleStr}" contenteditable="false">${data.name}</span>() `
|
|
// );
|
|
// tinymceHtml.value = tinymceHtml.value + ` <span style="${viewStyleStr}" contenteditable="false">${data.name}</span>() `
|
|
tinymce.activeEditor.execCommand('mceInsertContent', false, `<span style="${viewStyleStr}" contenteditable="false">${data.name}</span>()`);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
|
|
</style>
|
|
<style>
|
|
/* .tox:not(.tox-tinymce-inline) .tox-editor-header:not(.tox-editor-dock-transition){
|
|
display: none;
|
|
} */
|
|
</style>
|
|
|