Q.How to create a plugin and include it in CKEditor instance?

A.For learning quickly on how to create CKEditor plugin check http://www.sayopenweb.com/plugin-for-CKEditor/. And for including your plugin in CKEditor instance use,

CKEditor.replace('divcomponentid', {
        extraPlugins:'newplugin',
        toolbar:[
            ['Bold', 'Italic', 'Underline'],
            ['anchor','newplugin']
            ]
})

newplugin is newly created plugin which we need in the instance created.
Or if you are using custom config file for loading CKEditor instance use,

CKEditor.editorConfig = function(config) {
    config.extraPlugins = "newplugin";
    config.toolbar =
    [
        ['Bold', 'Italic', 'Underline'],
['anchor','newplugin']
    ];
};

Square brackets ‘[]’ are used to group the plugins together in CKEditor menu. Order of the plugins in menu are decided by order in which you have given(comma

seperated) while creating instance.

Q.How to remove default plugins in CKEditor?

A.Use removePlugins property for removing plugins from CKEditor,

CKEditor.replace('divcomponentid', {
        removePlugins: 'elementspath,Cut,Copy,Paste'
        toolbar:[
            ['Bold', 'Italic', 'Underline']
            ]
})

And if you are using custom config file for creating CKEditor instance use,

CKEditor.editorConfig = function(config) {
    config.removePlugins= "elementspath,Cut,Copy,Paste";
    config.toolbar =
    [
         ['Bold', 'Italic', 'Underline']
    ];
};

Here we are removing 4 default plugins (elementspath,Cut,Copy,Paste) from CKEditor instance.

Q.How do i set language for CKEditor for achieving localization?

A.Use language property for setting the language of CKEditor. By using this property CKEditor menu’s and labels will displaythe localized language.

CKEditor.replace('divcomponentid', {
        language: 'ja'
})

And if you are using custom config file for creating CKEditor instance use,

CKEditor.editorConfig = function(config) {
    language = "ja";
};

Even one can use javascript variable to set language file to make localization option dynamic.

Q.How do i achieve localization for my custom plugin i added?

A.Thats a nice question :). In your scripts folder find lang folder, once you open it we will find many javascript files(.js). Each file contains localized definition oflabels/menu’s for corresponding language, for English its en.js. CKEditor supports more than 50 languages.

Assume we have created a fresh plugin newplugin and need to acheive localization for English(en.js) and Japanese(ja.js) lanuages. First openen.js and,

CKEditor.lang['en'] =
{
-----
source : 'Source',
-----
newplugin : 'New Plugin',
-----
}

Now open ja.js

CKEditor.lang['ja'] =
{
-----
source : 'Source',
-----
newplugin : '新しいプラグインを',
-----
}

And inside your plugin.js where plugin behaviour and command is defined we will use variable editor.lang.newplugin to access localized

version of label text.

-----
CKEditor.plugins.add('newplugin', {
  init: function(editor) {
  -----
  editor.ui.addButton('newplugin',
     {
       label: editor.lang.newplugin
  });
-----
});
-----

Similarly we can open required language js files and add the corresponding label value.

Q.How to add custom plugin to toolbar menu in CKEditor?

A.Use ui.addButton for adding custom plugin to toolbar menu in plugin.js file.

CKEDITOR.plugins.add('newplugin', {
        init: function(editor) {
        -----
            editor.ui.addButton('newplugin', {
                icon: this.path + 'newplugin.png',
                command: 'newplugin'
            });
	    
-----
});

Q.How to add custom plugin to right click context menu in CKEditor?

A.Use addMenuItems for adding right click menu for a custom plugin created in plugin.js file.

CKEDITOR.plugins.add('newplugin', {
        init: function(editor) {
            if (editor.addMenuItems)
			editor.addMenuItem('newplugin', {
			command: 'newplugin',
                        group: 'clipboard',
                        order: 13
		    });
	    
-----
});

group is for combining the related operations, for this plugin we are adding it to default clipboard menu lists(cut,copy,paste) and

order will decide the order in which plugin are displayed when right clicked.

Q.How to create a custom group for context menu and decide order in which groups are displayed when right clicked in CKEditor?

A.For creating a custom group for new plugin, use menu_groups in config.js

CKEDITOR.editorConfig = function(config) {
	config.menu_groups = config.menu_groups + ',newgroup';
};

Order of the group is decided on where we append the new group name. if you add the new group name in front of existing groups then display priority will be

given to the group or if you append at end as shown in this example it will be the default priority list.
And ordering inside the group is decided by property(integer) order inside plugin.js

-----
CKEDITOR.plugins.add('newplugin', {
        init: function(editor) {
            if (editor.addMenuItems)
			editor.addMenuItem('newplugin', {
			command: 'newplugin',
                        group: 'newgroup',
                        order: 1
		    });
	    
-----
});

Q.How to add image or icon for custom plugin in CKEditor for toolbar and context menu?

A.Specify icon property with image or icon file path inside addMenuItems in plugin.js file. If you have added context menu option for plugin, the same image will appear in context menu.

CKEDITOR.plugins.add('newplugin', {
        init: function(editor) {
        -----
            editor.ui.addButton('newplugin', {
                icon: this.path + 'newplugin.png',
                command: 'newplugin'
            });

-----
});

this.path points to plugin folder path.

Q.How do i show/hide context menu based on some condition and Where do i add the code to show/hide?

A.We need to add the code for show/hide in plugin.js.

-----
CKEDITOR.plugins.add('newplugin', {
        init: function(editor) {
            editor.addCommand('newplugin', o);
            if (editor.addMenuItems) editor.addMenuItem("newplugin", { label: "New Plugin", command: 'newplugin', group: 'newgroup', order: 4 });
            if (editor.contextMenu){
		editor.contextMenu.addListener(function() {
                   if (condition)return null;
               	    return { "newplugin": CKEDITOR.TRISTATE_OFF };
            	});
	    }
        }
    });

In the above code based on the condition we add in if loop we decide whether the context menu is in visible or hidden state. we return null if we don’t need the context menu to display, otherwise return { “newplugin”: CKEDITOR.TRISTATE_OFF }. condition may be boolean value or expression, we can even check for a specific tag where the right click is done and decide whether to show/hide context menu.

Q.How to add a custom property like CKEDITOR.config.mynewproperty?

A.Just initialize the new property in plugin.js.

-----
 CKEDITOR.plugins.add('newplugin', {
        init: function(editor) {
            CKEDITOR.config.mynewproperty = null;//Initializing the property
-----
}
});

Above code will be executed when newplugin is loaded and CKEDITOR.config.mynewproperty is initialized with null value here.After that we can access the variable using CKEDITOR.config.mynewproperty or update the variable in config.js or anywhere in code for later use.

Q.How to attach events like blur, focus to CKEDITOR?

A.Attaching events is easier process. Following is the code to attach blur event to CKEDITOR,

 var editorinstance = CKEditor.replace('divcomponentid');
 editorinstance.on('blur', function() { alert('blur happened')})

So after the editor gets activated and then if we lose focus on editor(blur), an alert message will be displayed.
Some of the other events CKEDITOR works with are,

  • key : activated on key press
  • mode : activated when state of Editor changes
    editor.on('mode', function() {  
        if (editor.mode == 'wysiwyg') alert('edit mode');
        else if (editor.mode == 'readonly')alert('read only');
    });

    Here an alert window when editor status changes to readonly or edit.

  • insertHtml : activated whenever an html content is inserted to editor.
  • insertElement : activated whenever an html element is inserted to editor.
  • selectionChange : activated CKEDITOR menu dropdown is changed.
  • contentDom : activated when editor is loaded.
  • focus : activated when editor is on focus.

There are other various events for CKEDITOR, if we open ckeditor.js, will find more events.

I will be adding possible questions, clarifications, doubts and its solution that one can come across in course of development with CKEditor and CKEditor plugins. Hope this helps. And i will be adding data to this post as i find time and solutions.
Be Sociable, Share!