富文本组件调整

This commit is contained in:
wangxuemei
2024-08-09 16:31:41 +08:00
parent 5adb182c1f
commit 860cb821ae
7 changed files with 99 additions and 90 deletions

View File

@@ -17,15 +17,28 @@
// 富文本编辑器文档链接: https://www.wangeditor.com/v5/getting-started.html
// 引入富文本编辑器CSS
import '@wangeditor/editor/dist/css/style.css';
import { onBeforeUnmount, ref, shallowRef } from 'vue';
import { onBeforeUnmount, ref, shallowRef,watch,defineProps, defineEmits } from 'vue';
// 导入富文本编辑器的组件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
const props = defineProps({
value: {
type: String,
default: ()=>'',
},
});
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef();
const emit = defineEmits(['update:value'])
// 内容 HTML
const valueHtml = ref('');
watch(()=>valueHtml.value,(val)=>{
emit('update:value',val)
})
watch(()=>props.value,(val)=>{
valueHtml.value = val
console.log(val,'222222222222222');
})
const toolbarConfig = {
excludeKeys: [
'insertLink', // 排除菜单组,写菜单组 key 的值即可