HTML 页面的实时预览

Question

我找到了一些相关的答案，但我不确定它们是否适合我。

本质上，我正在开发一个为用户生成在线菜单的网页。 这个想法是有一个页面，用户可以在其中 select 该页面的选项（背景、字体等）并查看他们选择的实时预览。

输入当然是带有选择和输入以及颜色选择器的形式。 问题是我不知道如何进行实时预览。

我在 .net 核心 5 mvc 中执行此操作，因此可能必须有一个按钮来更新页面（我没有为可编辑页面编写代码），因此“实时”部分不如预览部分。

重要的是，假设预览只有 280 像素宽（星系折叠），我希望被预览的页面在屏幕上仍然看起来像 1920 像素宽。

Answer 1

您可以通过以下方式实现此目的

1. 从用户选择的样式选项创建view model
2. 将视图 model 传递给视图
3. 然后你需要使用 razor 引擎从 razor 生成 html
4. 您可以使用Html.Raw()在您的视图中显示 html

或者

您也可以通过传递 url 和用户选择的选项打开 iframe 内部的视图来执行此操作。