Uncaught (in promise) TypeError: Editor.enableReadOnlyMode is not a function (ckeditor)

Question

I want to enable read only mode for my ckeditor but when I use enableReadOnlyMode doesn't work.

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


const Editor = ClassicEditor;
const ckeditor = CKEditor.component;
const editorConfig = {};
Editor.enableReadOnlyMode( 'my-feature-id' );


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

it shows me this error in console:

Form.vue:32 Uncaught (in promise) TypeError: Editor.enableReadOnlyMode is not a function

Answer 1

The function can be called once the ckeditor is ready, which probably won't be exactly when the Vue component is created or mounted, but the editor itself will emit ready event which you can use to then call editor functions.

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

function onReady(editor) {
  editor.enableReadOnlyMode('my-feature-id')
}