hxgksystemapp/src/widget/associatedforms/associatedFormsTinyace.vue

<script lang='ts' setup>
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 { v4 as uuidv4 } from "uuid";

let onlyNumber = uuidv4().replaceAll('-','').toString();   //获取唯一编码

/**
 * 初始富文本组件
 */
const tinymceInit = {
  selector: "#"+onlyNumber,
	language_url: "/tinymce/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称）
	language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定
	skin_url: "/tinymce/skins/ui/oxide", // 这里引入的样式
	height: 260, // 限制高度
	statusbar:false,
	toolbar:false,
	branding: false,  //是否禁用“Powered by TinyMCE”
	menubar: false, //顶部菜单栏显示
	forced_root_block:'',
	newline_behavior:"",
	content_css: "/tinymce/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入	
}
const props = defineProps({
  aftText:{ 
    type: String, 
    default(){
			return {}
		} 
  },
  aftTextCopy:{ 
    type: String, 
    default(){
			return {}
		} 
  },
})

let $emit = defineEmits(["textChange"]);

const tinymceHtml = ref("")
tinymceHtml.value = props.aftText



onMounted(() => {
  	tinymce.init({}); // 初始化富文本
});
watch(()=>tinymceHtml.value, (val:any) => {
  $emit('textChange',val);
},
    { deep: true }
)


const addIcon = (currentObject:any) =>{
	tinymce.activeEditor?.execCommand('mceInsertContent', false, `<span style="margin:3px;background-color: #4189EF;border-radius: 5px; padding:3px" contenteditable="false" data-keyid= "${currentObject.id}" >${currentObject.label}</span>`);
}
const addIcon_field = (currentObject:any) =>{
	tinymce.activeEditor?.execCommand('mceInsertContent', false, `<span style="margin:3px;background-color: #4189EF;border-radius: 5px; padding:3px" contenteditable="false" data-keyid= "${currentObject.id}" >${currentObject.treeAttrs.show}</span>`);
}
const addIcon_org = (currentObject:any) =>{
  let id = "orgOrPerson:"+currentObject.id
	tinymce.activeEditor?.execCommand('mceInsertContent', false, `<span style="margin:3px;background-color: #4189EF;border-radius: 5px; padding:3px" contenteditable="false" data-keyid= "${id}" >${currentObject.label}</span>`);
}
//取消
const handelCancel = (associatedFormsHideDialogTextCopy:any) =>{
  tinymceHtml.value = associatedFormsHideDialogTextCopy
}
const tinymceReInit = ()=>{
    
    
    let str:string = props.aftTextCopy
}
const focusEditor = ()=>{
  console.log("1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111")
  console.log("111111111111111111111111"+onlyNumber)
  console.log(document.getElementById(onlyNumber))
  document.getElementById(onlyNumber)?.focus()
}


defineExpose({
  tinymceHtml,
  addIcon,
  addIcon_org,
  addIcon_field,
  handelCancel,
  tinymceReInit,
  focusEditor,
})

</script>
<template >
	<div >
    <editor :id="onlyNumber"   v-model="tinymceHtml" :init="tinymceInit" ></editor>
  </div>
	

</template>

<style  lang='scss' scoped>
	
</style>