Как заставить подсветку синтаксиса работать внутри текстового редактора iframe?(JavaScript, CSS) - PullRequest
0 голосов
/ 18 мая 2018

Я строю текстовый редактор, используя в качестве редактора iframe.

Я работаю над пунктом меню, который при щелчке позволяет пользователю написать блок кода, который затем оформляется с использованием подсветки синтаксиса Prism и добавляется в iframe с остальным текстовым содержимым.

При создании обычной веб-страницы любой код, завернутый в теги pre и code, мгновенно оформляется следующим образом:

enter image description here

Myпроблема в том, что я не могу найти способ заставить подсветку синтаксиса Prism работать в моем текстовом редакторе iframe (такая же проблема была бы с любой подсветкой синтаксиса).

Файл prism.css работает внутри iframe, но файл prism.js этого не делает.Я знаю это, потому что, когда функция запускается, вывод не был обработан файлом javascript, который добавляет классы, необходимые для изменения цветов, используя файл css:

enter image description here

Это изображение показывает, что происходит, когда вы нажимаете на пункт меню.HTML вставляется в iframe, но без какого-либо стиля.Затем, когда вы нажимаете кнопку предварительного просмотра, чтобы посмотреть, как выглядит сообщение в блоге, к тексту кодового блока не было применено никакого стиля, потому что prism.js не был запущен внутри iframe.

Я попытался включить скрипт внутритеги head самого iframe с классом "allow-scripts" и "allow-cross-origin", но это не сработало.

Я был бы очень признателен за любые идеи или решения для этого.

Вот мой код:

HTML:

enter image description here

JavaScript (функция вызывается при нажатии элемента меню ""):

enter image description here

Ответы [ 2 ]

0 голосов
/ 19 мая 2018

Выяснил, где я ошибался, файл prism.js работал при загрузке страницы и не запускался снова после добавления на страницу нового контента.Решил это, добавив ссылку src к тегам скрипта после добавления блока кода на страницу.

0 голосов
/ 19 мая 2018

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

iframe - это , а не контейнер для элементов или контента с вашей собственной веб-страницы.Содержимое, помещаемое в iframe, будет игнорироваться браузером.

<iframe>This is my content</iframe>

Для iframe требуется источник для загрузки.

<iframe src="https://www.wikipedia.com/"></iframe>

Нет причин использовать iframe какконтейнер для вашего собственного контента.Если вы просто используете iframe в качестве контейнера для вашего редактора, практически любой другой тег HTML будет работать просто отлично.Переключите <iframe> на <div>, и у вас будет рабочий редактор.

...