Верх страницы
Время для прочтения: 0 мин. 3 сек.

Задание направления и отображения текста в 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

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы