Вопрос или проблема
Ок, я собираюсь создать веб-сайт на урду (справа налево) и английском (слева направо), который будет содержать абзацы, такие как этот:
<p style="direction:rtl">کیا حال ہے buddy? سب خیریت ہے؟</p>
Вы можете увидеть, что предложение отображается неправильно. Я хочу изменить направление английских слов в предложении. Вот так:
<p style="direction:rtl">کیا حال ہے <bdo dir="ltr">buddy?</bdo> سب خیریت ہے؟</p>
Вы можете увидеть более четкое различие на JSfiddle. Как это возможно? Есть идеи?
Возможно, это поможет вам, он добавляет кнопки, и по скриншоту похоже, что можно достичь желаемого: https://wordpress.org/plugins/wp-rtl/
Ответ или решение
Чтобы добавить кнопку в TinyMCE, позволяющую изменять направление выбранного текста, вам потребуется создать собственный плагин. Выделение текста на двух языках (урду и английском) требует корректной обработки текста, где арабский шрифт (или любой другой язык с правосторонним направлением) будет отображаться правильно, в то время как английские слова должны оставаться слева направо.
Шаги для разработки кнопки в TinyMCE для изменения направления текста
1. Настройка среды TinyMCE
Первым делом убедитесь, что у вас установлен TinyMCE на вашем сайте. Вы можете следовать документации TinyMCE для установки и настройки редактора.
2. Создание плагина
Создайте плагин, который добавит новую кнопку в панель инструментов TinyMCE. Это включает в себя определение новой команды и соответствующей ей обработки:
tinymce.PluginManager.add('directionSwitcher', function(editor, url) {
// Добавление кнопки
editor.ui.registry.addButton('directionSwitcher', {
text: 'Изменить направление',
onAction: function() {
const selectedText = editor.selection.getContent();
const rtlText = `<bdo dir="ltr">${selectedText}</bdo>`;
editor.insertContent(rtlText);
}
});
});3. Инициализация плагина в TinyMCE
Затем вам нужно инициализировать плагин при настройке редактора. Добавьте ваш плагин в конфигурацию TinyMCE:
tinymce.init({
selector: 'textarea', // замените на ваш селектор
plugins: 'directionSwitcher',
toolbar: 'directionSwitcher', // добавление кнопки на панель инструментов
directionality: 'rtl' // установка начального направления
});4. CSS для визуального оформления
Вам может понадобиться немного CSS для настройки визуального оформления кнопок и текста с различными направлениями. Убедитесь, что ваши стили поддерживают как LTR, так и RTL.
body {
direction: rtl; /* Устанавливаем направление для тела документа */
}
.bdo {
direction: ltr; /* Устанавливаем направление для текста, обернутого в bdo */
}5. Тестирование функционала
После того, как вы добавили код, протестируйте его, запустив редактор. Выберите текст, и после нажатия на кнопку “Изменить направление” проверьте, правильно ли отобразится английский текст.
Заключение
Используя данный подход, вы можете легко реализовать кнопку для изменения направления текста в TinyMCE. Данный плагин позволяет обеспечить корректное отображение текста на различных языках, что особенно важно для многоязычных сайтов. Благодаря простоте применения и индивидуальности, ваш редактор будет более универсальным и пользовательским. Не забудьте протестировать все функции перед развертыванием на вашем сайте.