wcfsetup/install/files/js/3rdParty/ckeditor/plugins/wbutton/plugin.js

   1 /**
   2  * Provides custom buttons for CKEditor.
   3  *
   4  * In short we're applying a style element on the current selection which will be replaced
   5  * with the plain BBCode tag (e.g. [tt]) afterwards. Using insertText() or insertHtml() does
   6  * not work here as it discards the inline styles set for the selection.
   7  *
   8  * @author      Alexander Ebert
   9  * @copyright   2001-2014 WoltLab GmbH
  10  * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  11  */
  12 (function() {
  13         /**
  14          * Transforms the BBCode span-element into a plain BBCode.
  15          *
  16          * @param       CKEDITOR        editor
  17          */
  18         function transformBBCode(editor) {
  19                 editor.fire('lockSnapshot');
  20
  21                 var $markerID = null;
  22                 $(editor.container.$).find('span.wcfBBCode').removeClass('wcfBBCode').html(function() {
  23                         var $bbcode = $(this).data('bbcode');
  24                         $markerID = WCF.getRandomID();
  25                         return '[' + $bbcode + ']' + $(this).html() + '<span id="' + $markerID + '" />[/' + $bbcode + ']';
  26                 });
  27
  28                 if ($markerID !== null && typeof window.getSelection != "undefined") {
  29                         var $marker = $('#' + $markerID).get(0);
  30                         var $range = document.createRange();
  31                         $range.setStartAfter($marker);
  32                         $range.collapse(true);
  33                         var $selection = window.getSelection();
  34                         $selection.removeAllRanges();
  35                         $selection.addRange($range);
  36
  37                         $marker.remove();
  38                 }
  39
  40                 editor.fire('unlockSnapshot');
  41         }
  42
  43         // listens for 'afterCommandExec' to transform BBCodes into plain text
  44         CKEDITOR.on('instanceReady', function(event) {
  45                 event.editor.on('afterCommandExec', function(ev) {
  46                         if (ev.data.name.indexOf('__wcf_') == 0) {
  47                                 transformBBCode(ev.editor);
  48                         }
  49                 });
  50         });
  51
  52         /**
  53          * Enables this plugin.
  54          */
  55         CKEDITOR.plugins.add('wbutton', {
  56                 /**
  57                  * list of required plugins
  58                  * @var array<string>
  59                  */
  60                 requires: [ 'button' ],
  61
  62                 /**
  63                  * Initializes the 'wbutton' plugin.
  64                  *
  65                  * @param       CKEDITOR        editor
  66                  */
  67                 init: function(editor) {
  68                         if (!__CKEDITOR_BUTTONS.length) {
  69                                 return;
  70                         }
  71
  72                         for (var $i = 0, $length = __CKEDITOR_BUTTONS.length; $i < $length; $i++) {
  73                                 this._wcfAddButton(editor, __CKEDITOR_BUTTONS[$i]);
  74                         }
  75                 },
  76
  77                 /**
  78                  * Adds command and button for given BBCode.
  79                  *
  80                  * @param       CKEDITOR        editor
  81                  * @param       object          button
  82                  */
  83                 _wcfAddButton: function(editor, button) {
  84                         var $style = new CKEDITOR.style({
  85                                 element: 'span',
  86                                 attributes: {
  87                                         'class': 'wcfBBCode',
  88                                         'data-bbcode': button.name
  89                                 }
  90                         });
  91                         editor.addCommand('__wcf_' + button.name, new CKEDITOR.styleCommand($style));
  92                         editor.ui.addButton('__wcf_' + button.name, {
  93                                 command: '__wcf_' + button.name,
  94                                 icon: button.icon,
  95                                 label: button.label
  96                         });
  97                 }
  98         });
  99 })();