CKEditor setData() Not Working with modal form

Question

I have two CKEditor instance on my webpage: the first one is used with other form inputs to add a record to a bootstrap-table; the other is for editing that record in a modal form.

I've tried all different combinations of setData():

Throws error (with or without callback):

        var editorModal = CKEDITOR.replace( 'editRemarks', {
            customConfig: '/contest/common/js/ckeditor_config_wf.js'
        });

        editorModal.setData( [row.htmlRemarks], {
            callback: function() {
                this.checkDirty(); // true
            }
        } );

This doesn't throw an error but doesn't set the data:

        editorModal.on( "instanceReady", function( event ){
            editorModal.setData([row.htmlRemarks]);
         });

In the latter case, once the modal is shown I can set the contents from the console like this:

editorModal.setData('<p>Hello World</p>');

Since the table can include up to 10 records, I need to update the modal form inputs dynamically (via an edit button on the table row). What am I doing wrong?

CKEditor v4.15.1 • 09-11-2020

EDIT My main form uses a CKEditor instance to add remarks to an entry, and then clicking the 'Add Model Entry' button adds it to the table below.

The user can then edit the details by clicking the edit icon and that brings up a modal form:

My list of plugins from my config file:

config.extraPlugins = 'button,dialog,panelbutton,colorbutton,colordialog,wordcount,notification,htmlwriter,confighelper,autogrow';

It's only working now as I set the instance on the edit button click:

if (CKEDITOR) {
    if (!editorModal) {
        editorModal = CKEDITOR.replace('editRemarks', {
customConfig: '/contest/common/js/ckeditor_config_wf.js'
        });
    }
}

... and destroy it on save:

if (editorModal) {
    editorModal.destroy();
    editorModal = undefined;
}

Answer 1

This works for CKEditor on modals:

var editor = CKEDITOR.replace( 'editor1', {});
editor.on( "instanceReady", function( event ){
   editor.setData('your data');
});

Reference: setData() method sometimes not displaying the data in the CkEditor

Another method that works is:

setTimeout(function(){editor.setData(htmlData);},10);

Reference: problems with the setData function