Apr 26th, 2014
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
- /images
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