CKEditor 4 — широко используемый редактор форматированного текста, предоставляющий мощные функции для создания и редактирования контента в веб-приложениях. По умолчанию CKEditor 4 предлагает несколько параметров форматирования, но не включает такие параметры выравнивания, как выравнивание по левому, правому краю или по центру. В этой статье мы рассмотрим различные методы добавления этих параметров выравнивания в CKEditor 4, что позволит вам выравнивать текст так, как вы хотите. Давайте погрузимся!

Метод 1: собственный плагин
Один из способов добавить параметры выравнивания в CKEditor 4 — создать собственный плагин. Вот пример того, как этого можно добиться:

CKEDITOR.plugins.add('alignment', {
  icons: 'alignleft,alignright,aligncenter',
  init: function(editor) {
    editor.addCommand('alignleft', {
      exec: function(editor) {
        editor.applyStyle(new CKEDITOR.style({ element: 'p', styles: { 'text-align': 'left' } }));
      }
    });
    editor.addCommand('alignright', {
      exec: function(editor) {
        editor.applyStyle(new CKEDITOR.style({ element: 'p', styles: { 'text-align': 'right' } }));
      }
    });
    editor.addCommand('aligncenter', {
      exec: function(editor) {
        editor.applyStyle(new CKEDITOR.style({ element: 'p', styles: { 'text-align': 'center' } }));
      }
    });
    editor.ui.addButton('AlignmentLeft', {
      label: 'Align Left',
      command: 'alignleft',
      toolbar: 'paragraph'
    });
    editor.ui.addButton('AlignmentRight', {
      label: 'Align Right',
      command: 'alignright',
      toolbar: 'paragraph'
    });
    editor.ui.addButton('AlignmentCenter', {
      label: 'Align Center',
      command: 'aligncenter',
      toolbar: 'paragraph'
    });
  }
});

Чтобы использовать этот плагин, вам необходимо включить его файл JavaScript после основного файла JavaScript CKEditor в ваш HTML-файл. Кроме того, обязательно настройте экземпляр CKEditor для включения плагина выравнивания.

Метод 2: пользовательские стили
Другой подход заключается в определении пользовательских стилей, которые представляют желаемое выравнивание. Вот пример:

CKEDITOR.stylesSet.add('alignmentStyles', [
  { name: 'Left Alignment', element: 'p', styles: { 'text-align': 'left' } },
  { name: 'Right Alignment', element: 'p', styles: { 'text-align': 'right' } },
  { name: 'Center Alignment', element: 'p', styles: { 'text-align': 'center' } }
]);

Чтобы включить эти стили, вам необходимо настроить экземпляр CKEditor, включив в него набор стилей alignmentStyles.

Метод 3: использование конфигураций CKEditor
CKEditor 4 предоставляет опцию конфигурации под названием «contentsCss», которая позволяет вам указать файл CSS для загрузки в iframe редактора. Вы можете определить стили выравнивания в этом CSS-файле, например:

p.align-left {
  text-align: left;
}
p.align-right {
  text-align: right;
}
p.align-center {
  text-align: center;
}

Затем в конфигурации CKEditor установите параметр «contentsCss», чтобы он указывал на этот CSS-файл.

Добавление параметров выравнивания (слева, справа, по центру) в CKEditor 4 может значительно улучшить возможности редактирования текста в веб-приложениях. В этой статье мы рассмотрели три различных метода достижения этой цели: создание собственного плагина, определение пользовательских стилей и использование конфигураций CKEditor. Выберите метод, который лучше всего соответствует вашим потребностям, и начните выравнивать текст в CKEditor 4 так, как вы хотите!