редактор tinymce wysiwyg - проблема с текстовым курсором, текстовые поля / области становятся неактивными

#reactjs #tinymce #tinymce-5

Вопрос:

Я работаю над несколькими функциями для проекта, который я создал несколько месяцев назад, когда впервые изучал React. Я хотел добавить редактор wysiwyg в одну из моих форм, чтобы пользователь мог больше контролировать раздел «о программе» страницы события (т. Е. Вставлять медиа и изображения, редактирование исходного кода html, форматирование шрифтов и т. Д.)

Редактор, который я использую, — TinyMCE 5.0. Этот проект представляет собой серверную часть Rails и интерфейс React. (Я не использую Redux — этот проект был способом попрактиковаться в React, когда я впервые его изучал.) Вы можете найти мой последний коммит здесь, если хотите увидеть мой код

Проблема

Я могу получить визуализацию редактора wysiwyg. Я также могу вводить и форматировать текст внутри тела редактора. Когда я нажимаю на значок кода или значок встраивания изображения (как на gif ниже), появляется новый модальный, но когда я нажимаю на него, чтобы ввести, текстовый курсор появляется, а затем исчезает. Итак, я не могу печатать, и кажется, что текстовая область и поля становятся неактивными (из-за отсутствия лучшего термина — я все еще в начале своего пути кодирования.)

Я только что зарегистрировался, и TinyMCE также предоставляет доступ к плагинам премиум-класса, поэтому я не думаю, что это проблема с разрешениями / подпиской моей учетной записи.

Я также ничего не получаю в консоли, но если вы можете оказать какую-либо помощь, это было бы оценено!

Спасибо!

Редактор TinyMCE 5 — проблема с текстовым курсором — текстовые области становятся недействующими

Ответ №1:

Весьма вероятно, что библиотека, которую вы используете для своего модального (который содержит TinyMCE), не позволяет фокусу перемещаться в другое место. Поскольку вы не указали библиотеку, которую используете для своего модала, я ничего не могу сказать вам о том, как решить эту проблему, но мы знаем, что это проблема с обычными библиотеками, такими как Bootstrap:

https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog

Все, что вы используете, должно иметь аналогичную способность.

1. Спасибо за вашу помощь!! Да, я использовал react-bootstrap, и я решил удалить модальности и просто использовать простое условие в состоянии, чтобы показывать / скрывать форму на основе событий нажатия кнопки или отправки.