Как получить доступ к полю ввода в диалоговом окне TinyMCE 5 URL

Question

Я портирую установку TinyMCE 3 на версию 5. Я установил кнопку панели инструментов, которая открывает диалоговое окно, содержащее пользовательскую страницу и, следовательно, загружается с использованием новой windowManager.openUrl метод. У меня есть несколько кнопок нижнего колонтитула, и, конечно же, onAction( dialogApi, details ) обработчик, который вызывается при нажатии кнопки. details.name содержит название кнопки, на которую нажали, чтобы я мог реагировать на каждый щелчок индивидуально.

Кажется, когда используется обычный диалог, я настраиваю каждое поле ввода в моем plugin.js файл и получить его значение через getData метод первого параметра, который в мой onAction обработчик. Этот метод не существует в моем dialogApi для диалога URL.

Мой iframe/ диалог содержит раскрывающийся список, и я хочу вставить выбранное значение в экземпляр редактора при нажатии кнопки нижнего колонтитула диалога. Я понимаю, что могу использовать postMessage отправить информацию из iframe в плагин, но это не то, что я хочу.

Как я могу получить доступ к полям ввода в диалоге, когда кнопка нажата, и мой диалог был открыт через openUrl? Как получить доступ к документу в диалоговом окне iframe? this похоже на объект JavaScript, в который я перешел openUrl, document это страница, на которой встроен редактор.

Answer 1

Я сделал демонстрацию, которая показывает два разных способа получения данных из пользовательских вводов в диалоге iframe: https://codesandbox.io/embed/tinymce-dialog-openurl-demo-fpfew

Этот блог также является отличным ресурсом для работы с диалогами iframe в TinyMCE: https://www.martyfriedel.com/blog/tinymce-5-url-dialog-component-and-window-messaging

Первый метод в моей демонстрации использует кнопку в HTML самого iframe. Эта кнопка собирает данные пользователя и использует postMessage чтобы отправить эти данные обратно в редактор TinyMCE.

Как вы можете видеть, процесс немного сложнее, если использовать кнопки нижнего колонтитула, а не кнопку "inrame". По сути, кнопка нижнего колонтитула отправляет сообщение iframe в диалоговом окне с просьбой собрать и вставить пользовательские данные в TinyMCE.

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

https://security.stackexchange.com/questions/67889/why-do-browsers-enforce-the-same-origin-security-policy-on-iframes

Это также означает, что TinyMCE не имеет возможности узнать, что находится внутри iframe, как это происходит с диалогом TinyMCE, поэтому данные нужно извлекать "вручную". Имея это в виду, если это запрос кросс-источника (другой домен), нет способа получить доступ к содержимому iframe без использования postMessage,

getData упомянутый метод работает с диалогами TinyMCE, потому что все в диалоге является компонентом TinyMCE. Компоненты TinyMCE имеют собственную концепцию значений / состояний, которая getData может получить доступ для возврата данных.

Когда вы используете диалоговое окно URL, диалоговое окно больше не использует компоненты TinyMCE, поэтому оно не может собирать данные для getDataследовательно, этот метод не существует. Вот почему вы должны вручную получить необходимые данные из любых элементов в диалоговом окне URL и отправить их обратно в TinyMCE, используя postMessage,