CKEditor启用只读模式报错：Editor.enableReadOnlyMode不是函数

报错原因 #

enableReadOnlyMode 是编辑器实例对象的方法，不是 ClassicEditor 类的静态方法，直接通过类调用必然触发「TypeError: ... is not a function」错误。

正确实现方法 #

在Vue组件中，通过CKEditor组件的@ready事件获取初始化后的编辑器实例，再调用该方法：

<template>
  <ckeditor
    class="ckeditor no-preflight"
    id="ckeditor"
    :editor="Editor"
    v-model="form.description"
    :config="editorConfig"
    @ready="handleEditorReady"
  ></ckeditor>
</template>

<script>
import '../../../../public/assets/vendor/ckeditor5-41.2.0/build/ckeditor';
import CKEditor from '@ckeditor/ckeditor5-vue';

export default {
  components: {
    ckeditor: CKEditor.component
  },
  data() {
    return {
      Editor: ClassicEditor,
      editorConfig: {},
      form: {
        description: ''
      }
    };
  },
  methods: {
    handleEditorReady(editor) {
      // 通过编辑器实例调用只读模式方法
      editor.enableReadOnlyMode('my-feature-id');
    }
  }
};
</script>

另一种全局只读方案 #

如果不需要细粒度控制，直接在配置里设置全局只读更简单：

const editorConfig = {
  readOnly: true
};

两种方式的区别 #

• enableReadOnlyMode：支持多场景细粒度控制，后续可以通过disableReadOnlyMode('my-feature-id')单独关闭该场景的只读状态。
• config.readOnly：直接全局锁定编辑器，整个编辑器处于只读状态。

内容的提问来源于stack exchange，提问作者Mohammad Hossein