Как реализовать функцию предварительного просмотра в веб-приложении?

Question

По сути, мы используем безголовую CMS для редактирования контента на Веб-сайте A. Мы создаем наш собственный CMS-интерфейс на основе безголового CMS API (назовите этот Website CMS).

Теперь у нас есть эта страницав Website CMS, где вы можете отредактировать контент на левой панели и получить предварительный просмотр веб-сайта A на правой панели (мобильный просмотр).

Я не делал ничего подобного раньше, и мне интересно, что этолучший способ сделать это, и если есть какие-либо библиотеки, которые помогают с этой функциональностью.

Некоторые идеи:

1. Встроить веб-сайт A в CMS веб-сайта и любые изменения, сделанные на левой панели, в основном простообновляет веб-сайт A (который только что встроен в страницу).
2. Воссоздайте веб-сайт A как страницу в CMS веб-сайта и вызывайте те же API-интерфейсы, чтобы изменения происходили как на веб-сайте A CMS веб-сайта, так и на реальном веб-сайте A. (Хотя я не понимаю, как это было бы более выгодно и создаст 2 отдельные кодовые базы для одной и той же страницы).
3. Others ???

Основной фреймворк, который мы используем, - это ReactJ для этого пользовательского интерфейса CMS.

Answer 1

вы можете установить связь между CMS и веб-сайтом A для обмена данными.

Параметры

1. вы можете встроить веб-сайт A в CMS веб-сайта с помощью iframe, а затем вы можете использовать postMessage для обмена данными между CMS и веб-сайтом A.
2. В противном случае вы можете использовать WebSockets, где веб-сайт A будет прослушивать изменения, внесенные на левой панели CMS.

Answer 2

Вариант 2 - это то, что я буду делать, и оно не обязательно будет дублирующим.

Вы бы хотели, чтобы пользователи могли просматривать изменения без их публикации. Так что портирование реального сайта не будет совместимо с этой целью.

Дублирование кода, вероятно, будет минимальным. Он будет разделять большую часть того же кода и распространяться намного быстрее.