Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can we set editor to readOnly based on state?

See original GitHub issue

Issue Description

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?

Issue Analytics

State:
Created 5 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

codeslayer1commented, Jul 26, 2018

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;}}

0reactions

codeslayer1commented, Aug 6, 2018

Closing this issue due to no further activity.