Useful Methods And Events In CKEditor

This blog explains most important and repeated using methods, events of CKEditor. If you didn’t know CKEditor, please read Introduction to CKEditor.

Invoke or Initialize CKeditor

<textarea name="htmlcontent" id="myckeditor" > hi.! I am Ckeditor </textarea>
CKEDITOR.replace('myckeditor');

Replace <textarea> with CKEditor instance. For textareas, the initial value in the editor will be the textarea value (hi.! I am Ckeditor). If I use DOM elements (<div>), their ‘innerHTML’ will be used instead. It is recommended to use <textarea> and <div> elements only.

Is available of CKEditor

Check CKEditor is attached with our elements.

var isCkeditor = typeof CKEDITOR.instances[myckeditor] != 'undefined';

isCkEditor returns true/false, which is based on our element(myckeditor) and is attached with CKEditor.

Destroy or Remove CKEditor

Remove CKEditor instances from our element. The elment (<textarea> or <div> ) will be recovered from CKEditor. Before going to destroy, it must update the element, using ‘updateElement()’ method.

if(typeof CKEDITOR.instances[myckeditor] != 'undefined') {
setTimeout(function () {
CKEDITOR.instances[myckeditor].updateElement();
CKEDITOR.instances[myckeditor].destroy();
}, );
}

Events and type

CKEditor have lots of events and methods. Events are triggered when particular dom element is clicked or focus or something happened. We will catch these events, using CKEditor instance ready method.

Here, mention few events and its types.

Paste event

An event is triggered when we paste some content in to CKEditor or paste from dialog (paste as Word, plain text).

CKEDITOR.on('instanceReady', function(ev) {
    ev.editor.on('paste', function(evt) {
        if (evt.data.type == 'html') {
            // when paste as plain text or direct paste in ckeditor body.
        }
        if (evt.data.type == 'text') {
            // when paste as text or paste from word.
        }
    });
});

Focus and Blur Editor Content

An event is triggered when editor content is focus or blur.

CKEDITOR.on('instanceReady', function(ev) {
    ev.editor.on('focus', function(evt) {
        console.log(“Editor focused”)
    });
    ev.editor.on('blur', function(evt) {
        console.log(“Editor blur”)
    });
});

Maximize and minimize

We can catch the editor when maximized or minimized by the event given below.

CKEDITOR.on('instanceReady', function(ev) {
    ev.editor.on('maximize', function(evt) {
        console.log('maximized');
    });
    ev.editor.on('minimize', function(evt) {
        console.log('minimized');
    });
});

Dialog Definitions

Dialog definitions is an important event, when fired; click any tool bar button; which is attached with dialog (image, table). This event makes it possible to customize the dialog before creating it.

CKEDITOR.on('dialogDefinition', function (ev) {
});

Image

CKEDITOR.on('dialogDefinition', function(ev) {
    if (ev.data.name == 'image') {}
});

Table

CKEDITOR.on('dialogDefinition', function(ev) {
    if (ev.data.name == 'table') {}
});

Get current dialog, dialog tab and element of the dialog tab

When 'dialogDefinition' is fired, we can get the elements of the dialog and customize the dialog. Thus, we can extend more options (input, button, dropdown) in the dialog box.

CKEDITOR.on('dialogDefinition', function(ev) {
    if (ev.data.name == 'image') {
        var infoTab = ev.data.definition.getContents('info'); //get contents of infotab in image dialog
        var browseBtn = infoTab.get('browse'); //get specific element in info tab
        //here do some action (onclick, focus) of element
    }
});

Set value of the dialog input

var CurrentDialog = CKEDITOR.dialog.getCurrent();
CurrentDialog.selectPage('info');
var urlInput = CurrentDialog.getContentElement('info', 'txtUrl');
urlInput.setValue('pic/flowers.jpg');

Get value of the dialog input

urlInput.getValue();

Force to apply the script or CSS

In my previous blog post ,I mentioned how to add CSS and JS files to CKEditor. These methods needs to be reinitialized by CKEditor but here it is forced to insert scripts/CSS files to an editor head. This doesn’t need to be destroyed and reintialized. 

var head = CKEDITOR.instances.Content.document.getHead();
var myscript = CKEDITOR.document.createElement('link', {
    attributes: {
        type: 'text/css',
        rel: 'stylesheet',
        'href': 'mytemp.css'
    }
});
head.append(myscript);

For more about CKEditor, refer

1. Create CKEditor Plugin
2. Add Custom File Uploader in CKEditor