Search code examples
javascriptjqueryckeditorjquery-events

CKEditor with MVC: Event handling


I have the following code, which generates my default CKEditor on my form:

$('#Content').ckeditor({
    filebrowserUploadUrl: '/ControlPanel/Reviews/UploadReviewImage/'
});

As you can see, my implementation is quite simple - most settings are controlled in config.js and are global to my site, except the uploader handlers.

Been looking for a few days, but can't find anything concise. I need to be able to detect when CKEditor is clicked, and make the window larger (though not full screen). I also want to display some help text when CKEditor is clicked... but I can't figure out how to handle dom events, or apply JQuery events to it? I've tried a few different things, the following being my latest attempt:

$("#Content").ckeditorGet().click(window.showDescription);

But I get a TypeError:

Uncaught TypeError: Object #<Object> has no method 'click'

Which is understandable, as CKEditor has its own event system.

The CKEditor documentation seems very unintuitive - and the examples aren't really much help.


UPDATE

I managed to get this working on my own, though because of thw way I've written my window.ShowDescription function, I needed to pass a JQuery event in to it. Here's the code for anyone interested :)

$("#Content").ckeditorGet().on("instanceReady", function () {
        this.on("focus", function () {
            this.resize(638);
            // Mimic JQuery event for textarea
            var originalEditor = $(this.container.$).parents(".input").find("textarea");
            originalEditor.trigger(jQuery.Event("focus"));
        });
        this.on("blur", function () {
            this.resize(400);
        });
    });

Solution

  • As you already suspected, what you did above won't work. The ckeditorGet method returns an instance of an editor, not the DOM element of the editor.

    You can use the focus event of ckeditor to determine what to do when the editor receives focus.

    Example:

    $("#Content").ckeditorGet().on('focus', function(e) {
        // do what you want on focus
    });
    

    May I suggest enabling the autogrow plugin to change the content area size? It's more generalized to the size of your content, and may work better than trying to resize on your own.