Drupal and CKEditor - custom plugin example - Bootstrap 3 glyphicons

This is how to create a plugin for CKEditor. I also show how to integrate it with the WYSIWYG module. It was tested on CKEditor 4.3.4 and the WYSIWYG module version 7.x-2.x-dev from 2014-Mar-20.

There are three files needed (or just two if you aren't integrating with Drupal): the Drupal .module file, the icon, and a file that must be called plugin.js. Here is the directory structure:

  • sites/all/modules/custom/examplemodule
    • /examplemodule.module
    • /iconfont
      • /images
        • /icon.png (16x16)
      • /plugin.js

examplemodule.module:

<?php
 
/**
 * Implements hook_wysiwyg_plugin().
 * 
 * Iconfont plugin based on https://github.com/jessedobbelaere/ckeditor-iconfont
 */
function examplemodule_wysiwyg_plugin($editor, $version) {
  switch ($editor) {
    case 'ckeditor':
      return array(
        'iconfont' => array(
          'path' => drupal_get_path('module', 'examplemodule') . '/iconfont',
          'filename' => 'plugin.js',
          'buttons' => array(
            'IconFont' => t('Example icons.'),
          ),
          'load' => TRUE,
        ),
      );
  }
}

plugin.js:

/**
 * @file
 * plugin.js
 */
 
/**
 * Allows icons to be used in CKEditor.
 */
(function($) {
  CKEDITOR.plugins.add('iconfont',
      {
        init: function(editor)
        {
          editor.addCommand('iconFontDialog', new CKEDITOR.dialogCommand('iconFontDialog'));
          editor.ui.addButton('IconFont',
              {
                label: 'Insert icon',
                command: 'iconFontDialog',
                icon: this.path + 'images/icon.png'
              });
          CKEDITOR.dialog.add('iconFontDialog', function(editor)
          {
            return {
              title: 'Icon',
              minWidth: 400,
              minHeight: 480,
              contents:
                  [
                    {
                      id: 'tab1',
                      label: 'Basic Settings',
                      elements:
                          [
                            {
                              type: 'text',
                              id: 'name',
                              className: 'iconsdialoginput',
                              label: 'Enter icon name below or click on an icon name.',
                              validate: CKEDITOR.dialog.validate.notEmpty("Icon name field cannot be empty")
                            },
                            {
                              type: 'html',
                              html: '<div style="height: 300px">'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-adjust"></i> glyphicon glyphicon-adjust</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-align-center"></i> glyphicon glyphicon-align-center</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-align-justify"></i> glyphicon glyphicon-align-justify</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-align-left"></i> glyphicon glyphicon-align-left</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-align-right"></i> glyphicon glyphicon-align-right</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-arrow-down"></i> glyphicon glyphicon-arrow-down</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-arrow-left"></i> glyphicon glyphicon-arrow-left</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-arrow-right"></i> glyphicon glyphicon-arrow-right</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-arrow-up"></i> glyphicon glyphicon-arrow-up</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-asterisk"></i> glyphicon glyphicon-asterisk</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-backward"></i> glyphicon glyphicon-backward</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-ban-circle"></i> glyphicon glyphicon-ban-circle</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-barcode"></i> glyphicon glyphicon-barcode</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-bell"></i> glyphicon glyphicon-bell</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-bold"></i> glyphicon glyphicon-bold</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-book"></i> glyphicon glyphicon-book</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-bookmark"></i> glyphicon glyphicon-bookmark</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-briefcase"></i> glyphicon glyphicon-briefcase</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-bullhorn"></i> glyphicon glyphicon-bullhorn</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-calendar"></i> glyphicon glyphicon-calendar</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-camera"></i> glyphicon glyphicon-camera</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-certificate"></i> glyphicon glyphicon-certificate</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-check"></i> glyphicon glyphicon-check</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-chevron-down"></i> glyphicon glyphicon-chevron-down</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-chevron-left"></i> glyphicon glyphicon-chevron-left</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-chevron-right"></i> glyphicon glyphicon-chevron-right</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-chevron-up"></i> glyphicon glyphicon-chevron-up</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-circle-arrow-down"></i> glyphicon glyphicon-circle-arrow-down</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-circle-arrow-left"></i> glyphicon glyphicon-circle-arrow-left</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-circle-arrow-right"></i> glyphicon glyphicon-circle-arrow-right</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-circle-arrow-up"></i> glyphicon glyphicon-circle-arrow-up</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-cloud"></i> glyphicon glyphicon-cloud</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-cloud-download"></i> glyphicon glyphicon-cloud-download</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-cloud-upload"></i> glyphicon glyphicon-cloud-upload</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-cog"></i> glyphicon glyphicon-cog</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-collapse-down"></i> glyphicon glyphicon-collapse-down</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-collapse-up"></i> glyphicon glyphicon-collapse-up</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-comment"></i> glyphicon glyphicon-comment</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-compressed"></i> glyphicon glyphicon-compressed</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-copyright-mark"></i> glyphicon glyphicon-copyright-mark</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-credit-card"></i> glyphicon glyphicon-credit-card</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-cutlery"></i> glyphicon glyphicon-cutlery</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-dashboard"></i> glyphicon glyphicon-dashboard</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-download"></i> glyphicon glyphicon-download</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-download-alt"></i> glyphicon glyphicon-download-alt</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-earphone"></i> glyphicon glyphicon-earphone</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-edit"></i> glyphicon glyphicon-edit</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-eject"></i> glyphicon glyphicon-eject</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-envelope"></i> glyphicon glyphicon-envelope</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-euro"></i> glyphicon glyphicon-euro</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-exclamation-sign"></i> glyphicon glyphicon-exclamation-sign</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-expand"></i> glyphicon glyphicon-expand</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-export"></i> glyphicon glyphicon-export</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-eye-close"></i> glyphicon glyphicon-eye-close</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-eye-open"></i> glyphicon glyphicon-eye-open</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-facetime-video"></i> glyphicon glyphicon-facetime-video</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-fast-backward"></i> glyphicon glyphicon-fast-backward</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-fast-forward"></i> glyphicon glyphicon-fast-forward</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-file"></i> glyphicon glyphicon-file</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-film"></i> glyphicon glyphicon-film</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-filter"></i> glyphicon glyphicon-filter</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-fire"></i> glyphicon glyphicon-fire</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-flag"></i> glyphicon glyphicon-flag</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-flash"></i> glyphicon glyphicon-flash</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-floppy-disk"></i> glyphicon glyphicon-floppy-disk</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-floppy-open"></i> glyphicon glyphicon-floppy-open</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-floppy-remove"></i> glyphicon glyphicon-floppy-remove</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-floppy-save"></i> glyphicon glyphicon-floppy-save</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-floppy-saved"></i> glyphicon glyphicon-floppy-saved</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-folder-close"></i> glyphicon glyphicon-folder-close</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-folder-open"></i> glyphicon glyphicon-folder-open</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-font"></i> glyphicon glyphicon-font</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-forward"></i> glyphicon glyphicon-forward</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-fullscreen"></i> glyphicon glyphicon-fullscreen</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-gbp"></i> glyphicon glyphicon-gbp</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-gift"></i> glyphicon glyphicon-gift</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-glass"></i> glyphicon glyphicon-glass</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-globe"></i> glyphicon glyphicon-globe</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-hand-down"></i> glyphicon glyphicon-hand-down</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-hand-left"></i> glyphicon glyphicon-hand-left</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-hand-right"></i> glyphicon glyphicon-hand-right</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-hand-up"></i> glyphicon glyphicon-hand-up</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-hd-video"></i> glyphicon glyphicon-hd-video</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-hdd"></i> glyphicon glyphicon-hdd</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-header"></i> glyphicon glyphicon-header</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-headphones"></i> glyphicon glyphicon-headphones</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-heart"></i> glyphicon glyphicon-heart</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-heart-empty"></i> glyphicon glyphicon-heart-empty</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-home"></i> glyphicon glyphicon-home</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-import"></i> glyphicon glyphicon-import</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-inbox"></i> glyphicon glyphicon-inbox</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-indent-left"></i> glyphicon glyphicon-indent-left</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-indent-right"></i> glyphicon glyphicon-indent-right</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-info-sign"></i> glyphicon glyphicon-info-sign</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-italic"></i> glyphicon glyphicon-italic</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-leaf"></i> glyphicon glyphicon-leaf</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-link"></i> glyphicon glyphicon-link</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-list"></i> glyphicon glyphicon-list</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-list-alt"></i> glyphicon glyphicon-list-alt</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-lock"></i> glyphicon glyphicon-lock</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-log-in"></i> glyphicon glyphicon-log-in</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-log-out"></i> glyphicon glyphicon-log-out</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-magnet"></i> glyphicon glyphicon-magnet</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-map-marker"></i> glyphicon glyphicon-map-marker</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-minus"></i> glyphicon glyphicon-minus</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-minus-sign"></i> glyphicon glyphicon-minus-sign</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-move"></i> glyphicon glyphicon-move</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-music"></i> glyphicon glyphicon-music</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-new-window"></i> glyphicon glyphicon-new-window</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-off"></i> glyphicon glyphicon-off</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-ok"></i> glyphicon glyphicon-ok</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-ok-circle"></i> glyphicon glyphicon-ok-circle</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-ok-sign"></i> glyphicon glyphicon-ok-sign</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-open"></i> glyphicon glyphicon-open</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-paperclip"></i> glyphicon glyphicon-paperclip</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-pause"></i> glyphicon glyphicon-pause</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-pencil"></i> glyphicon glyphicon-pencil</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-phone"></i> glyphicon glyphicon-phone</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-phone-alt"></i> glyphicon glyphicon-phone-alt</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-picture"></i> glyphicon glyphicon-picture</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-plane"></i> glyphicon glyphicon-plane</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-play"></i> glyphicon glyphicon-play</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-play-circle"></i> glyphicon glyphicon-play-circle</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-plus"></i> glyphicon glyphicon-plus</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-plus-sign"></i> glyphicon glyphicon-plus-sign</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-print"></i> glyphicon glyphicon-print</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-pushpin"></i> glyphicon glyphicon-pushpin</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-qrcode"></i> glyphicon glyphicon-qrcode</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-question-sign"></i> glyphicon glyphicon-question-sign</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-random"></i> glyphicon glyphicon-random</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-record"></i> glyphicon glyphicon-record</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-refresh"></i> glyphicon glyphicon-refresh</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-registration-mark"></i> glyphicon glyphicon-registration-mark</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-remove"></i> glyphicon glyphicon-remove</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-remove-circle"></i> glyphicon glyphicon-remove-circle</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-remove-sign"></i> glyphicon glyphicon-remove-sign</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-repeat"></i> glyphicon glyphicon-repeat</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-resize-full"></i> glyphicon glyphicon-resize-full</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-resize-horizontal"></i> glyphicon glyphicon-resize-horizontal</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-resize-small"></i> glyphicon glyphicon-resize-small</div>'
                                  + '<div class="icons__item"><i class="glyphicon glyphicon-resize-vertical"></i> glyphicon glyphi

Tags

Internal References

Article Type

General