Create Simple CKEditor Widget - Part 1

Prerequisites 

Projects that use widgets depends on the Widget Plugin. Download and install it from http://ckeditor.com/addon/widget.

Download And Install The Dependencies for the Widget Plugin

http://ckeditor.com/addon/lineutils

http://ckeditor.com/addon/clipboard

 

Create The Plugin Folder and Files

ckeditor_root/

  plugins

    box

      icons

         box.png(needed for the menu button)

      plugin.js      

 

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
      template:
      '<div class="simplebox">' +
      '<h2 class="simplebox-title">Title</h2>' +
      '<div class="simplebox-content"><p>Content...</p></div>' +
      '</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

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.