8 changed files with 958 additions and 39 deletions
@ -0,0 +1,79 @@ |
|||||
|
<template> |
||||
|
|
||||
|
<div style="margin-bottom: 15px; height: 40px; line-height: 40px;"> |
||||
|
<el-tree-select |
||||
|
v-model="leftValue1" style="width: 290px;" :data="leftTreeSource" |
||||
|
check-strictly :render-after-expand="false" filterable @change="leftChanged" /> |
||||
|
<span style="margin-left: 8px;margin-right: 8px;">的值填充到</span> |
||||
|
<el-tree-select |
||||
|
v-model="rightValue1" style="width: 290px;" :data="rightTreeSource" |
||||
|
check-strictly :render-after-expand="false" filterable @change="rightChanged" /> |
||||
|
<Delete style="width: 22px; height: 22px; margin-right: 35px;cursor: pointer; color: #50A6FF;margin-top: 10px; display: block; float:right" @click="delRole" /> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
|
||||
|
|
||||
|
const props = defineProps({ |
||||
|
leftTreeSource: { |
||||
|
type: Object, |
||||
|
default() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
rightTreeSource: { |
||||
|
type: Object, |
||||
|
default() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
leftValue: { |
||||
|
type: String, |
||||
|
default() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
rightValue: { |
||||
|
type: String, |
||||
|
default() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
currentKey: { |
||||
|
type: String, |
||||
|
default() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
}) |
||||
|
const leftValue1 = ref() |
||||
|
const rightValue1 = ref() |
||||
|
|
||||
|
leftValue1.value = props.leftValue |
||||
|
rightValue1.value = props.rightValue |
||||
|
|
||||
|
|
||||
|
|
||||
|
let emit = defineEmits(["update:leftValue", "update:rightValue","delRole"]); |
||||
|
|
||||
|
function leftChanged(){ |
||||
|
emit('update:leftValue',leftValue1) |
||||
|
} |
||||
|
function rightChanged(){ |
||||
|
emit('update:rightValue',rightValue1) |
||||
|
} |
||||
|
|
||||
|
function delRole(){ |
||||
|
//alert(props.currentKey) |
||||
|
emit('delRole',props.currentKey) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style></style> |
||||
@ -0,0 +1,107 @@ |
|||||
|
|
||||
|
<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文件需自己创建并引入 |
||||
|
auto_focus : true, |
||||
|
} |
||||
|
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 = ()=>{ |
||||
|
tinymce.EditorManager.get(onlyNumber)?.focus(true) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
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> |
||||
@ -0,0 +1,108 @@ |
|||||
|
|
||||
|
<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文件需自己创建并引入 |
||||
|
auto_focus : true, |
||||
|
} |
||||
|
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 = ()=>{ |
||||
|
tinymce.EditorManager.get(onlyNumber)?.focus(true) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
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> |
||||
Loading…
Reference in new issue