vue-element-plus-admin框架用封装的form中的wangeditor设置readOnly不起作用的问题?-灵析社区

Fronttend

{ field: 'TemplateContent', component: 'Editor', componentProps: { mode: 'simple', height: '400px', editorConfig: { readOnly: true, toolbarConfig: { toolbarKeys: ['fontFamily', 'fontSize', 'color', 'sup', 'sub', 'lineHeight'] } }, // @ts-ignore onChange: (edit: IDomEditor) => { setValues({ TemplateContent: edit.getHtml() }) } }, colProps: { span: 24 } } 这是用的这个框架封装的form,在表单中添加一个wangeditor编辑器,我默认设置的 readOnly: true,也就是默认编辑器不能编辑,但我之后要设置成能编辑,代码是下面的,现在不起作用,我现在试的是editorConfig里到第二层还是起作用的,但是第三层的属性就不行了。 setSchema([ { field: 'TemplateContent', path: `componentProps.editorConfig.readOnly`, value: false } ]) 下面是editor源码: import { onBeforeUnmount, computed, PropType, unref, nextTick, ref, watch, shallowRef } from 'vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' import { IDomEditor, IEditorConfig, i18nChangeLanguage, DomEditor } from '@wangeditor/editor' import { propTypes } from '@/utils/propTypes' import { isNumber } from '@/utils/is' import { ElMessage } from 'element-plus' import { useLocaleStore } from '@/store/modules/locale' const localeStore = useLocaleStore() const currentLocale = computed(() => localeStore.getCurrentLocale) i18nChangeLanguage(unref(currentLocale).lang) const props = defineProps({ editorId: propTypes.string.def('wangeEditor-1'), height: propTypes.oneOfType([Number, String]).def('500px'), editorConfig: { type: Object as PropType, default: () => undefined }, modelValue: propTypes.string.def('') }) const emit = defineEmits(['change', 'update:modelValue']) // 编辑器实例,必须用 shallowRef const editorRef = shallowRef() const valueHtml = ref('') watch( () => props.modelValue, (val: string) => { if (val === unref(valueHtml)) return valueHtml.value = val }, { immediate: true } ) // 监听 watch( () => valueHtml.value, (val: string) => { emit('update:modelValue', val) } ) const handleCreated = (editor: IDomEditor) => { editorRef.value = editor } // 编辑器配置 const editorConfig = computed((): IEditorConfig => { return Object.assign( { customAlert: (s: string, t: string) => { switch (t) { case 'success': ElMessage.success(s) break case 'info': ElMessage.info(s) break case 'warning': ElMessage.warning(s) break case 'error': ElMessage.error(s) break default: ElMessage.info(s) break } }, autoFocus: false, scroll: true, uploadImgShowBase64: true }, props.editorConfig || {} ) }) const editorStyle = computed(() => { return { height: isNumber(props.height) ? `${props.height}px` : props.height } }) // 回调函数 const handleChange = (editor: IDomEditor) => { emit('change', editor) } // 组件销毁时,及时销毁编辑器 onBeforeUnmount(() => { const editor = unref(editorRef.value) // 销毁,并移除 editor editor?.destroy() }) const getEditorRef = async (): Promise => { await nextTick() return unref(editorRef.value) as IDomEditor } defineExpose({ getEditorRef })

阅读量:117

点赞量:0

问AI
看你描述的信息里面推测,你是直接通过修改绑定的 "wangEdit" 的中的 "readOnly" 属性来实现的编辑器开启/关闭只读功能?我不是很确定 "wangEdit" 在初始化完成之后,会不会监听 "editorConfig" 的改变去重新设置相关的配置。所以你可以改用编辑器的API来切换只读功能? 👉 "#enable -编辑器 API | wangEditor" (https://link.segmentfault.com/?enc=tB7HnRRgagzm7EQRji1hCA%3D%3D.k7O2MSspdGAtnB2h27YNiBjJm3Sp3ioUnVj0V%2BSbPohHxbuJSaGZxwFJuT5NAsRU) 当然也不排除你是因为数据响应丢失的问题,或者 "watch" 不是 "deep" 导致的。