Пишем плагин к TinyMCE для MODX Evolution

Итак, ниже приведен пример плагина для WYSIWIG TinyMCE, встроенного, в виде дополнения, в CMS / CMF MODX Evolution. Чтобы вы сразу же могли «скопипастить» и опробовать описанное, программный код привожу цельно. Смотрите мои комментарии.

(function() {
  tinymce.create('tinymce.plugins.CodeButton', {

    init : function(ed, url) {

      // Добавляем новую команду:
      ed.addCommand('codeButton', function(ui, v) {
        var e = ed.dom.getParent(ed.selection.getNode(), 'CODE');
        if (e == null) {
          // Будем ли добавлять элемент <CODE>text</CODE>:
          if ( ed.selection.isCollapsed() ) {
            // Когда ничего не выбрано:
            ed.formatter.toggle('code');
          } else {
            // Когда выбран текст MyText:
            var MySelected = ed.selection.getContent();
            ed.execCommand('mceReplaceContent', false, ' <code>' + MySelected + '</code>');
          }
        } else {
          // Удаляем элемент в противном случае:
          ed.execCommand('mceRemoveNode', false, e);
          ed.nodeChanged();
        }
      });

      // Добавляем кнопку на панель редактора:
      ed.addButton('codebutton', {
        title : 'Выделить код (<code>... </code>)',
        cmd : 'codeButton',
        image : url + '/code.png' // значок кнопки.
      });

      // "Горячие" клавиши: ALT+Q.
      ed.addShortcut('alt+q', 'Выделить код (<code>... </code>)', 'codeButton');

      // Активируем кнопку плагина, когда курсор перемещается к тегу:
      ed.onNodeChange.add(function(ed, cm, n) {
        if (n.nodeName == 'CODE')
          cm.setActive('codebutton', true);
        else
          cm.setActive('codebutton', false);
      });

    },

    // Информация о плагине:
    getInfo : function() {
      return {
        longname : 'Code button',
        author : 'Админ Red-book-cms.ru',
        authorurl : 'http://red-book-cms.ru',
        infourl : 'http://red-book-cms.ru',
        version : tinymce.majorVersion + "." + tinymce.minorVersion
      };
    },
  });

  // Регистрируем плагин:
  tinymce.PluginManager.add('codebutton', tinymce.plugins.CodeButton);

})();

Дополнительная информация:

  1. В каталоге с остальными плагинами TinyMCE - ../assets/plugins/tinymce/jscripts/tiny_mce/plugins,  создайте новую папку. Назовите её, например, «codebutton».
  2. В папке вашего плагина создайте файл с именем «editor_plugin.js» и поместите туда программный код, который был показан выше.
  3. Закачайте туда же значок кнопки плагина.
  4. Подключите дополнение к TinyMCE MODX Evolution. Подробнее об этом читайте в этой статье — http://red-book-cms.ru/cms/modx/evolution/modx-evolution-tinymce.html. Значение для поля «Индивидуальные кнопки» на вкладке «Интерфейс и представление» системной конфигурации — codebutton. Значение для «Индивидуальные плагины» — codebutton.
Скачать рабочий пример
Опубликовано 10-07-2013 в 10:38


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Свежие комментарии

  • Иван: к записи Привет всем, доброго времени суток! Я излазил весь »
  • Александер: к записи Потом пригляделся, вроде Вы не это имели в виду и »
  • Александер: к записи У Вас не русифицируется, потому что не везде включ »
  • Администратор: к записи Это надо использовать функции вашей CMS. »
  • Alex: к записи Ребят, а подскажите пожалуйста, как реализовать с »
  • Владимир: к записи А как теперь будет выглядеть ссылка для перехода н »
  • Администратор: к записи Не знаю. »

Статистика спама

Последние твиты