Add support for setting content state outside of an event listener

I have a modal that have a list of text options with a copy button beside each. When you click the copy button it should take that takes and updates content which would render CKEditor with the correct content copied over showing. I have it wired up where onClick of the copy button updates editor content state, which works, but it doesn’t update what the editor shows in the UI since it seems it only updates via one of the set eventListeners.

[codeslayer1]

Hi,

Events are used for listening to changes that happen inside CKEditor and take actions based on that. You cannot use it the other way to perform action on CKeditor instance from outside.

To change content inside your CKEditor from your parent component(modal in your case). You need to add a ref to it and then access the child functions. Here is an example.

1. Add ref like this to your CKEditor. <CKEditor ref={instance => { this.ckeditor = instance; }} />

2. Now you can set data in your CKEditor like this. Simply call this method in your onClick of the copy button with new data. It will be reflected in your CKEditor. this.ckeditor.editorInstance.setData(yourData);

Hope this solves your query.

[ramkrishna757575]

Sure will try that. Thanks