CODEWITHSUNDEEP
javascriptdrupal-7ckeditor
Shawn
Shawn

Reputation: 11401

How can I know when the javascripts that generate the CKEditor WYSIWYG editors have completed their execution?

I am using the CKEditor 3.6.5.7647 on Drupal 7 to turn all my filtered HTML text field into WYSIWYG editors. Drupal does this automatically, but it messes up the form validation. Indeed, drupal still correctly aplies the error class to the textarea, but the textarea is now hidden and replaced by the WYSIWYG editor, preventing the user from seeing the effects of that class (red border). I thought this would be easily fixed by adding a script which looks around at all the WYSIWYGs and sets their border red if the associated textarea has the error class set, but I'm finding that my script is being executed before the WYSIWYGs are built, breaking it. The only way I've managed to make this work is like this:

jQuery.noConflict();
(function ($) {
    "use strict";

    function fixWYSIWYGHighlights() {
        $('span.cke_skin_kama').each(function() {
            if ($(this).prev().hasClass('error')) {
                $(this).css({ border: '1px solid #f00'});
            }
        });
    }

    $('document').ready(function () {
        var timeout = window.setTimeout(fixWYSIWYGHighlights, 1000);    // TODO Find a better way to launch the script only once the WYSIWYGs are constructed
    });
}(jQuery));

As you can see, I'm using a timeout to make sure my script only gets executed once the script which builds the WYSIWYGs has terminated, but I was wondering if there was a better way of doing this.

SOLVED

Thanks to oleq's answer, I solved my problem with the following code:

jQuery.noConflict();
(function ($) {
    "use strict";

    $(document).ready(function () {
        CKEDITOR.on('instanceReady', function (event) {
            var textarea = $(event.editor.element.$)[0],
                element = $(event.editor.container.$)[0];
            if($(textarea).hasClass('error')) {
                $(element).css({ border: '1px solid #f00' });
            }
        });
    });
}(jQuery));

Upvotes: 1

Views: 182

Answers (1)

oleq
oleq

Reputation: 15895

I guess you should observe instanceReady event and execute your code within its callback:

CKEDITOR.on( 'instanceReady', function( event ) {
    console.log( 'Me ready!', event, event.editor );
});

Upvotes: 1

Related Questions