参考链接:https://huaweicloud.csdn.net/638edf68dacf622b8df8d152.html
父组件:
<Customabc
ref="editor" v-model="data.introduction" :min-height="400" name="职能" placeholder="请编辑" />
子组件
<div class="tinymce-container"> <editor v-model="tinymceData" :api-key="key" :init="tinymceOptions" :name="name" :readonly="tinymceReadOnly" /> </div> <script> import { ref, watch, watchEffect } from 'vue' import Editor from '@tinymce/tinymce-vue' import { key, plugins, toolbar, setting } from './config' export default { name: 'Customabc', components: { Editor }, props: { modelValue: { type: String, default: '', }, readOnly: { type: Boolean, default: false, }, options: { type: Object, default() { return { plugins, toolbar } }, }, name: { type: String, default: '', }, }, emits: ['update:modelValue'], setup(props, { emit }) { const tinymceData = ref(props.modelValue) // 编辑器数据 watch( () => tinymceData.value, (data) => emit('update:modelValue', data) ) // 监听富文本输入值变动 return { tinymceData, } }, } </script>
标签:自定义,default,modelValue,tinymceData,vue3,组件,import,type From: https://www.cnblogs.com/gaosj20210301/p/17349273.html