vue-element-plus-admin框架用封装的form中的wangeditor设置readOnly不起作用的问题？

Question

{    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源码：

<script setup lang="ts">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<IEditorConfig>,    default: () => undefined  },  modelValue: propTypes.string.def('')})const emit = defineEmits(['change', 'update:modelValue'])// 编辑器实例，必须用 shallowRefconst editorRef = shallowRef<IDomEditor>()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<IDomEditor> => {  await nextTick()  return unref(editorRef.value) as IDomEditor}defineExpose({  getEditorRef})</script><template>  <div class="border-1 border-solid border-[var(--el-border-color)] z-10">    <!-- 工具栏 -->    <Toolbar      :editor="editorRef"      :mode="editorConfig.mode"      :editorId="editorId"      :defaultConfig="editorConfig.toolbarConfig"      class="border-0 b-b-1 border-solid border-[var(--el-border-color)]"    />    <!-- 编辑器 -->    <Editor      v-model="valueHtml"      :editorId="editorId"      :defaultConfig="editorConfig"      :defaultContent="editorConfig.content"      :style="editorStyle"      @on-change="handleChange"      @on-created="handleCreated"    />  </div></template><style src="@wangeditor/editor/dist/css/style.css"></style>

Answer 1

看你描述的信息里面推测，你是直接通过修改绑定的 wangEdit 的中的 readOnly 属性来实现的编辑器开启/关闭只读功能？我不是很确定 wangEdit 在初始化完成之后，会不会监听 editorConfig 的改变去重新设置相关的配置。所以你可以改用编辑器的API来切换只读功能？ �� #enable -编辑器 API | wangEditor

当然也不排除你是因为数据响应丢失的问题，或者 watch 不是 deep 导致的。