Post
Ask Question

Useful Methods And Events In CKEditor

Introduction

 
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
  1. <textarea name="htmlcontent" id="myckeditor" > hi.! I am Ckeditor </textarea>  
  2. 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.
  1. 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.
  1. if(typeof CKEDITOR.instances[myckeditor] != 'undefined') {  
  2. setTimeout(function () {  
  3. CKEDITOR.instances[myckeditor].updateElement();  
  4. CKEDITOR.instances[myckeditor].destroy();  
  5. }, );  
  6. }   
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).
  1. CKEDITOR.on('instanceReady', function(ev) {  
  2.     ev.editor.on('paste', function(evt) {  
  3.         if (evt.data.type == 'html') {  
  4.             // when paste as plain text or direct paste in ckeditor body.  
  5.         }  
  6.         if (evt.data.type == 'text') {  
  7.             // when paste as text or paste from word.  
  8.         }  
  9.     });  
  10. });   
Focus and Blur Editor Content
 
An event is triggered when editor content is focus or blur.
  1. CKEDITOR.on('instanceReady', function(ev) {  
  2.     ev.editor.on('focus', function(evt) {  
  3.         console.log(“Editor focused”)  
  4.     });  
  5.     ev.editor.on('blur', function(evt) {  
  6.         console.log(“Editor blur”)  
  7.     });  
  8. });   
Maximize and minimize
 
We can catch the editor when maximized or minimized by the event given below.
  1. CKEDITOR.on('instanceReady', function(ev) {  
  2.     ev.editor.on('maximize', function(evt) {  
  3.         console.log('maximized');  
  4.     });  
  5.     ev.editor.on('minimize', function(evt) {  
  6.         console.log('minimized');  
  7.     });  
  8. });  
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.
  1. CKEDITOR.on('dialogDefinition', function (ev) {  
  2. });   
Image
  1. CKEDITOR.on('dialogDefinition', function(ev) {  
  2.     if (ev.data.name == 'image') {}  
  3. });  
Table
  1. CKEDITOR.on('dialogDefinition', function(ev) {  
  2.     if (ev.data.name == 'table') {}  
  3. });  
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.
  1. CKEDITOR.on('dialogDefinition', function(ev) {  
  2.     if (ev.data.name == 'image') {  
  3.         var infoTab = ev.data.definition.getContents('info'); //get contents of infotab in image dialog  
  4.         var browseBtn = infoTab.get('browse'); //get specific element in info tab  
  5.         //here do some action (onclick, focus) of element  
  6.     }  
  7. });  
Set value of the dialog input
  1. var CurrentDialog = CKEDITOR.dialog.getCurrent();  
  2. CurrentDialog.selectPage('info');  
  3. var urlInput = CurrentDialog.getContentElement('info', 'txtUrl');  
  4. urlInput.setValue('pic/flowers.jpg');  
Get value of the dialog input
  1. 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. 
  1. var head = CKEDITOR.instances.Content.document.getHead();  
  2. var myscript = CKEDITOR.document.createElement('link', {  
  3.     attributes: {  
  4.         type: 'text/css',  
  5.         rel: 'stylesheet',  
  6.         'href': 'mytemp.css'  
  7.     }  
  8. });  
  9. head.append(myscript);  
For more about CKEditor, refer