заметки веб-разработчика

Добавить свою кнопку-плагин в CKEditor

06 сентября 2018 - 16:17 -- ikode

Добавляем кнопку "Форматирование текста" в CKEditor

See the Pen Добавляем кнопку форматирования текста в CKEditor by ikode (@ikode) on CodePen.

Создаем этот плагин для Друпала

1) Создаем новую папку внутри /sites/all/modules/ckeditor/plugins/ с именем нового плагина

2) Создаем новый js-файл с именем plugin.js , в нем как раз и будем писать функционал нашей кнопки.

Например:

CKEDITOR.plugins.add('formatText',{
  init: function(editor){
    var cmd = editor.addCommand('formatText', {
      exec:function(editor){
        // Выделяем весь контент на странице
        editor.focus();
        editor.document.$.execCommand( 'SelectAll', false, null );
        // Получаем целиком содержимое контейнера редактора
        var text = editor.getData();
        // Заменяем ё на е
        var res1 = text.replace(/ё/ig, "е");
        // Убираем лишние пробелы
        var res2 = res1.replace(/ /ig, "");
        // Заменяем кавычки на "елочки"
        var res3 = res2.replace(/"/ig, "«");
        var res4 = res3.replace(/«\s/ig, "» ");
        // Заменяем дефис на тире, при этом дефис в нужных местах не трогая
        var res3 = res2.replace(/\s-\s/ig, " — ");
        // Вставляем готовый тескт в заранее выделенную область (выделено все)
        editor.insertHtml(res3);
      }
    });
    editor.ui.addButton('formatText',{
      label: 'Единое форматирование типографики для новостей',
      icon: this.path + 'images/icon.png',
      command: 'formatText'
    });
  }
});

3) Создаем папку под изображения images и закидываем туда иконку с именем icon.png

Иконка для плагина критична, без нее он работать не будет.

Готовый плагин-кнопку можно скачать здесь.