Задание направления и отображения текста в TinyMCE

Обычно, для задания направления и отображения текста в HTML используется универсальный атрибут dir. Однако, TinyMCE игнорирует его у тега textarea.

Чтобы изменить направление текста необходимо в код инициализации визуального редактора добавить элемент directionality: 'rtl'. Это приведет к тому, что все wysiwyg редакторы на странице будут показывать текст справа-налево.

Также можно подключить плагин с одноименным названием, чтобы иметь возможность менять направление с помощью кнопок на панели редактора tinymce-direction.

Если на странице должно быть несколько визуальных редакторов с разным направлением текста, то можно внутри callback функции определить атрибут dir у textarea и передать его в wysiwyg.

Полный код инициализации:

tinyMCE.init({
  editor_selector : "wysiwyg", // класс textarea
  directionality: 'ltr', // направление текста
  theme : "advanced", // расширенная тема
  language : 'ru', // язык
  plugins : "directionality", // плагины
  height : '450', // высота
  width: '100%', // ширина
  theme_advanced_buttons1 : "ltr,rtl", // кнопки для панели
  theme_advanced_toolbar_location : "top", // положение панели
  theme_advanced_toolbar_align : "left", // выравнивание панели
  setup: function(ed) { // задаем callback функцию
    ed.onInit.add(function(ed) {      
      // определение направления текста у textarea
      var direction = $('[name="'+ed.id+'"]').attr('dir');      
      // передать в wysiwyg направление текста из textarea
      ed.getBody().dir = direction;
    });
  }
});

HTML

<textarea class="wysiwyg" name="ru">Текст на русском</textarea>
<textarea class="wysiwyg" name="ar">Текст на арабском</textarea>

Пример рабочего варианта:

tinymce-wysiwyg

RTFM

Источник: https://www.kobzarev.com/programming/tinymce-text-direction/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

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

%d такие блоггеры, как: