Пишем плагин к 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>











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

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

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