[Summary view] [Print] [Text view]

   1  (function () {
   2    'use strict';
   3  
   4    /**
   5     * @copyright  (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
   6     * @license    GNU General Public License version 2 or later; see LICENSE.txt
   7     */
   8    (function (tinyMCE, Joomla, window, document) {
   9      Joomla.JoomlaTinyMCE = {
  10        /**
  11         * Find all TinyMCE elements and initialize TinyMCE instance for each
  12         *
  13         * @param {HTMLElement}  target  Target Element where to search for the editor element
  14         *
  15         * @since 3.7.0
  16         */
  17        setupEditors: function setupEditors(target) {
  18          var container = target || document;
  19          var pluginOptions = Joomla.getOptions ? Joomla.getOptions('plg_editor_tinymce', {}) : Joomla.optionsStorage.plg_editor_tinymce || {};
  20          var editors = [].slice.call(container.querySelectorAll('.js-editor-tinymce'));
  21          editors.forEach(function (editor) {
  22            var currentEditor = editor.querySelector('textarea');
  23            var toggleButton = editor.querySelector('.js-tiny-toggler-button');
  24            var toggleIcon = editor.querySelector('.icon-eye'); // Setup the editor
  25  
  26            Joomla.JoomlaTinyMCE.setupEditor(currentEditor, pluginOptions); // Setup the toggle button
  27  
  28            if (toggleButton) {
  29              toggleButton.removeAttribute('disabled');
  30              toggleButton.addEventListener('click', function () {
  31                if (Joomla.editors.instances[currentEditor.id].instance.isHidden()) {
  32                  Joomla.editors.instances[currentEditor.id].instance.show();
  33                } else {
  34                  Joomla.editors.instances[currentEditor.id].instance.hide();
  35                }
  36  
  37                if (toggleIcon) {
  38                  toggleIcon.setAttribute('class', Joomla.editors.instances[currentEditor.id].instance.isHidden() ? 'icon-eye' : 'icon-eye-slash');
  39                }
  40              });
  41            }
  42          });
  43        },
  44  
  45        /**
  46         * Initialize TinyMCE editor instance
  47         *
  48         * @param {HTMLElement}  element
  49         * @param {Object}       pluginOptions
  50         *
  51         * @since 3.7.0
  52         */
  53        setupEditor: function setupEditor(element, pluginOptions) {
  54          // Check whether the editor already has ben set
  55          if (Joomla.editors.instances[element.id]) {
  56            return;
  57          }
  58  
  59          var name = element ? element.getAttribute('name').replace(/\[\]|\]/g, '').split('[').pop() : 'default'; // Get Editor name
  60  
  61          var tinyMCEOptions = pluginOptions ? pluginOptions.tinyMCE || {} : {};
  62          var defaultOptions = tinyMCEOptions.default || {}; // Check specific options by the name
  63  
  64          var options = tinyMCEOptions[name] ? tinyMCEOptions[name] : defaultOptions; // Avoid an unexpected changes, and copy the options object
  65  
  66          if (options.joomlaMergeDefaults) {
  67            options = Joomla.extend(Joomla.extend({}, defaultOptions), options);
  68          } else {
  69            options = Joomla.extend({}, options);
  70          }
  71  
  72          if (element) {
  73            // We already have the Target, so reset the selector and assign given element as target
  74            options.selector = null;
  75            options.target = element;
  76          }
  77  
  78          var buttonValues = [];
  79          var arr = Object.keys(options.joomlaExtButtons.names).map(function (key) {
  80            return options.joomlaExtButtons.names[key];
  81          });
  82          var icons = {
  83            joomla: '<svg viewBox="0 0 32 32" width="24" height="24"><path d="M8.313 8.646c1.026-1.026 2.688-1.026 3.713-0.001l0.245 0.246 3.159-3.161-0.246-0.246c-1.801-1.803-4.329-2.434-6.638-1.891-0.331-2.037-2.096-3.591-4.224-3.592-2.364 0-4.28 1.92-4.28 4.286 0 2.042 1.425 3.75 3.333 4.182-0.723 2.42-0.133 5.151 1.776 7.062l7.12 7.122 3.156-3.163-7.119-7.121c-1.021-1.023-1.023-2.691 0.006-3.722zM31.96 4.286c0-2.368-1.916-4.286-4.281-4.286-2.164 0-3.952 1.608-4.24 3.695-2.409-0.708-5.118-0.109-7.020 1.794l-7.12 7.122 3.159 3.162 7.118-7.12c1.029-1.030 2.687-1.028 3.709-0.006 1.025 1.026 1.025 2.691-0.001 3.717l-0.244 0.245 3.157 3.164 0.246-0.248c1.889-1.893 2.49-4.586 1.8-6.989 2.098-0.276 3.717-2.074 3.717-4.25zM28.321 23.471c0.566-2.327-0.062-4.885-1.878-6.703l-7.109-7.125-3.159 3.16 7.11 7.125c1.029 1.031 1.027 2.691 0.006 3.714-1.025 1.025-2.688 1.025-3.714-0.001l-0.243-0.243-3.156 3.164 0.242 0.241c1.922 1.925 4.676 2.514 7.105 1.765 0.395 1.959 2.123 3.431 4.196 3.431 2.363 0 4.28-1.917 4.28-4.285 0-2.163-1.599-3.952-3.679-4.244zM19.136 16.521l-7.111 7.125c-1.022 1.024-2.689 1.026-3.717-0.004-1.026-1.028-1.026-2.691-0.001-3.718l0.244-0.243-3.159-3.16-0.242 0.241c-1.836 1.838-2.455 4.432-1.858 6.781-1.887 0.446-3.292 2.145-3.292 4.172-0.001 2.367 1.917 4.285 4.281 4.285 2.034-0.001 3.737-1.419 4.173-3.324 2.334 0.58 4.906-0.041 6.729-1.867l7.109-7.124-3.157-3.163z"></path></svg>'
  84          };
  85          arr.forEach(function (xtdButton) {
  86            var tmp = {};
  87            tmp.text = xtdButton.name;
  88            tmp.icon = xtdButton.icon;
  89            tmp.type = 'menuitem';
  90  
  91            if (xtdButton.iconSVG) {
  92              icons[tmp.icon] = xtdButton.iconSVG;
  93            }
  94  
  95            if (xtdButton.href) {
  96              tmp.onAction = function () {
  97                document.getElementById(xtdButton.id + "_modal").open();
  98              };
  99            } else {
 100              tmp.onAction = function () {
 101                // eslint-disable-next-line no-new-func
 102                new Function(xtdButton.click)();
 103              };
 104            }
 105  
 106            buttonValues.push(tmp);
 107          }); // Ensure tinymce is initialised in readonly mode if the textarea has readonly applied
 108  
 109          var readOnlyMode = false;
 110  
 111          if (element) {
 112            readOnlyMode = element.readOnly;
 113          }
 114  
 115          if (buttonValues.length) {
 116            options.setup = function (editor) {
 117              editor.settings.readonly = readOnlyMode;
 118              Object.keys(icons).forEach(function (icon) {
 119                editor.ui.registry.addIcon(icon, icons[icon]);
 120              });
 121              editor.ui.registry.addMenuButton('jxtdbuttons', {
 122                text: Joomla.Text._('PLG_TINY_CORE_BUTTONS'),
 123                icon: 'joomla',
 124                fetch: function fetch(callback) {
 125                  return callback(buttonValues);
 126                }
 127              });
 128            };
 129          } else {
 130            options.setup = function (editor) {
 131              editor.settings.readonly = readOnlyMode;
 132            };
 133          } // We'll take over the onSubmit event
 134  
 135  
 136          options.init_instance_callback = function (editor) {
 137            editor.on('submit', function () {
 138              if (editor.isHidden()) {
 139                editor.show();
 140              }
 141            }, true);
 142          }; // Create a new instance
 143          // eslint-disable-next-line no-undef
 144  
 145  
 146          var ed = new tinyMCE.Editor(element.id, options, tinymce.EditorManager);
 147          ed.render();
 148          /** Register the editor's instance to Joomla Object */
 149  
 150          Joomla.editors.instances[element.id] = {
 151            // Required by Joomla's API for the XTD-Buttons
 152            getValue: function getValue() {
 153              return Joomla.editors.instances[element.id].instance.getContent();
 154            },
 155            setValue: function setValue(text) {
 156              return Joomla.editors.instances[element.id].instance.setContent(text);
 157            },
 158            getSelection: function getSelection() {
 159              return Joomla.editors.instances[element.id].instance.selection.getContent({
 160                format: 'text'
 161              });
 162            },
 163            replaceSelection: function replaceSelection(text) {
 164              return Joomla.editors.instances[element.id].instance.execCommand('mceInsertContent', false, text);
 165            },
 166            // Required by Joomla's API for Mail Component Integration
 167            disable: function disable(disabled) {
 168              return Joomla.editors.instances[element.id].instance.setMode(disabled ? 'readonly' : 'design');
 169            },
 170            // Some extra instance dependent
 171            id: element.id,
 172            instance: ed
 173          };
 174        }
 175      };
 176      /**
 177       * Initialize at an initial page load
 178       */
 179  
 180      document.addEventListener('DOMContentLoaded', function () {
 181        Joomla.JoomlaTinyMCE.setupEditors(document);
 182      });
 183      /**
 184       * Initialize when a part of the page was updated
 185       */
 186  
 187      document.addEventListener('joomla:updated', function (_ref) {
 188        var target = _ref.target;
 189        return Joomla.JoomlaTinyMCE.setupEditors(target);
 190      });
 191    })(window.tinyMCE, Joomla, window, document);
 192  
 193  })();