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();   //获取唯一编码
//onlyNumber = "#"+onlyNumber
/**
 * 初始富文本组件
 */
const tinymceInit = {
  selector: "#tinymce",
	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, (val) => {
  $emit('textChange',val);
})


const addIcon = (currentObject:any) =>{
  //console.log(currentObject)
	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 handelCancel = (associatedFormsHideDialogTextCopy:any) =>{

  //console.log(associatedFormsHideDialogTextCopy)
  tinymceHtml.value = associatedFormsHideDialogTextCopy
  
  
}
const tinymceReInit = ()=>{
  //alert("tinymceReInit")
  //tinymce.init({}); // 初始化富文本
  //console.log(tinymce.get("tinymce"))
  

  //setTimeout(() => {
    
    let str:string = props.aftTextCopy
    console.log(str)
    //tinymce.get("tinymce")?.setContent(str)
  //}, 60);

}


defineExpose({
  tinymceHtml,
  addIcon,
  handelCancel,
  tinymceReInit,
})

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

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