Question

I have an instance of CKEditor inside a Backbone View with a plugin that posts whatever text is in the editor to my site on click. I want to clear the CKEditor on click as well but using setData doesn’t work. It flashes as though something is happening, but then resets to the same data that was already there.

It’s called inside the plugin like this:

note: THIS is a variable referencing the Backbone View

CKEDITOR.plugins.add( 'post', {
    init: function( editor ) {
        editor.addCommand('post', {
            exec: function(editor) {
                THIS.model.postMessageAttempt(editor.getData());
                THIS.options.data = "";
                editor.setData("");
            }
        });
        editor.ui.addButton('Post', {
            label: THIS.i18n.postText(),
            command: 'post'
        });

    }
} );

I’ve also tried with setData("some text") and THIS.editor.setData("") (I have a reference to the editor saved in the View) but both had the same result. Any ideas about what is going wrong?

EDIT
I’ve also tried using CKEditor’s integration with jQuery with this call THIS.$el.find('textarea' + this.id).val(""); and it doesn’t flash anymore, but it still doesn’t clear out the editor.

Answer 1

The problem was twofold: First, setData calls a function, afterSetData, at the end of the function and that function calls getData. getData calls the function beforeGetData at the beginning of the function and that function calls setData. I think the goal was to get around the fact that there’s a lot of shallow referencing instead of deep referencing but even in the un-minified ckeditor.js it was unclear why this was done.

And Second, that I was also calling disableEnablePost, in order to correctly enable/disable posting from the editor to the site, on many events (focus, key[down], etc). disableEnablePost called getData which caused timing issues with my call to setData in the post plugin.

Problem:

CKEDITOR.plugins.add( 'post', {
    init: function( editor ) {
        editor.addCommand('post', {
            exec: function(editor) {
                THIS.model.postMessage(editor.getData());
                THIS.options.data = "";
                editor.setData("");
            }
        });
        editor.ui.addButton('Post', {
            label: THIS.i18n.postText(),
            command: 'post'
        });
        editor.on('key', function (event) {
            THIS.disableEnablePost(editor.getCommand( 'post' ), event);
        });
    }
} );

Here is my solution:

CKEDITOR.plugins.add( 'post', {
    init: function( editor ) {
        editor.addCommand('post', {
            exec: function(editor) {
                THIS.model.postMessage(editor.getData());
            }
        });
       ...
    }
} );

model.postMessage now triggers an event when it has completed which is caught in the view and then calls this function:

clearRTE: function() {
    this.editor.setData("");
    this.options.data = "";
}

Finally, I changed disableEnablePost so that it doesn’t call getData every time, which was not a good practice. Now, it calls editor.getSnapshot() which is much more lightweight, there’s no data processing, and no calls to either getData or setData so it’s better for the frequent use.