Can we set editor to readOnly based on state?

Is there a way to set the component as readOnly? I’ve tried to set the config property readOnly using a state property called submitLoading that will be true or false.

It seems that dynamically using state to set this property won’t change the property since the component is already initialized.

Here’s what I got goin on:

<CKEditor
    scriptUrl="/ckeditor/ckeditor.js"
    content={data.notes}
    config={{
        removePlugins: "elementspath,uploadimage,uploadfile",
        toolbar: "None",
        readOnly: submitLoading
    }}
    events={{ instanceReady: editorReady.bind(this), change: this.editorChange.bind(this) }}
 />

Any ideas?

[codeslayer1]

If you use config property to set readOnly, it will only work during the initialisation.

If you want to toggle the readOnly mode dynamically, you can keep a reference to the CKEditor and use it to toggle the editor whenever the submitLoading property changes. Here is a sample code.

//call this function whenever your submitLoading property changes
setReadOnly(){
    this.ckeditor.editorInstance.setReadOnly(submitLoading);
}

<CKEditor
       ref={instance => {this.ckeditor = instance;}}

[codeslayer1]

Closing this issue due to no further activity.