vue3 WangEditor 怎么不让编辑只读状态

在Vue3中使用WangEditor，如果你想让已处于只读模式的编辑器变为可编辑状态，你需要取消其`readonly`属性。首先，在你的组件中安装并引入WangEditor：

npm install wangeditor --save

然后，在模板中初始化WangEditor实例，并添加一个方法来切换编辑器的`readonly`状态：

<template>
  <div ref="editor">
    <wang-editor :value="content" :options="editorOptions" @ready="onEditorReady"></wang-editor>
  </div>
</template>

<script>
import WangEditor from 'wang editor';

export default {
  components: {
    WangEditor,
  },
  data() {
    return {
      content: '',
      editorOptions: {
        readonly: false, // 默认为false，表示非只读状态
      },
    };
  },
  methods: {
    toggleReadonly() {
      if (this.$refs.editor) {
        const editor = this.$refs.editor.wangEditor;
        editor.config.readOnly = !editor.config.readOnly;
      }
    },
    onEditorReady(editor) {
      editor.on('ready', () => {
        // 初始化时设置为非只读
        this.toggleReadonly();
      });
    },
  },
};
</script>

当你想要改变编辑器状态时，只需调用`toggleReadonly()`方法即可。