ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/codepage/page2.vue

<!--
@ 作者: 秦东
@ 时间: 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>