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

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

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

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

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

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

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


reactjs javascript content-management-system headless live-preview
person catandmouse    schedule 01.10.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вариант 2 - это то, что я сделал бы, и не обязательно дублировать.

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

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

person famouspotatoes    schedule 03.10.2019

arrow_upward
0
arrow_downward

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

Параметры

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