Create Simple CKEditor Widget - Part 1


Projects that use widgets depends on the Widget Plugin. Download and install it from

Download And Install The Dependencies for the Widget Plugin


Create The Plugin Folder and Files





         box.png(needed for the menu button)



Create The Plugin - plugin.js

In the plugin.js file add the following.

//creates a new plugin called box
CKEDITOR.plugins.add('box', {
  //depends on the widget plugin
  requires: 'widget',
  //uses box.png in the icon folder. Will be used for menu button.
  icons: 'box',

  //standard plugin initialization function
  init: function (editor) {

    //register the widget(using the widget API)
    editor.widgets.add('box',  {
      //creates a button in the menu. Button will use the icon defined earlier.
      //Buttons text(Create a box) will be a tooltip popup.
      button: 'Create a box',
      //define the template code that will be inserted into the editor when user click the button.
      //template for the widget
      '<div class="simplebox">' +
      '<h2 class="simplebox-title">Title</h2>' +
      '<div class="simplebox-content"><p>Content...</p></div>' +
    } );

The widget icon

The icon for the widget will appear on the toolbar.

Widget Content

After clicking the widget button, the content from the widget will be inserted into the editor. The content will be immutable and can be drag around.


Cookbook Category: 

Add new comment