javascript - 模板构建器网站如何保存用户编辑，然后将其显示给其他用户？

Question

也许我的问题有点令人困惑，希望这能澄清我在问什么。因此，如果您曾经看过那些模板构建器网站，用户可以在其中设计网站上的网页。您知道，更改文本框的大小、图像的大小、按特定顺序排列元素。然后，当他们保存或提交并尝试转到他们构建的页面时，它会显示为包含所有编辑的常规网页。他们可以回去改变它，它会即时改变。

Shopify 就是一个例子，您可以在其中选择一个主题，然后更改主题中的一些设置。比如整体字体、主题颜色，甚至当你建立自己的主页时。我的意思是，您可以在一个区域中添加产品的“集合”，然后可能在其下方添加一个“时事通讯”区域，用于收集用户的电子邮件等……所有这些都是元素，而您选择将它们放在网页上的哪个位置，并且在您单击“保存”之前，编辑不会反映在主页上。

所以我的问题是，他们如何保存这些数据并将其应用于 HTML 和 CSS，以便当用户访问主页时，他们会像管理员一样看到确切的编辑？

一个一般的想法会很棒，只要它有意义

谢谢您的帮助。

标签： javascripthtmlcss

Answer 1

一种方法（我相信 CKEditor 使用）是使用 2 路解析器：一种将嵌套接口（及其上的属性）转换为 HTML，另一种将 HTML 转换回接口。

保存在后端的所有内容都是由用户更改产生的纯 HTML。当用户去编辑网站时，HTML 内容的内容被解析并分离成对用户更友好的显示（可能带有添加/删除内容和应用样式的按钮）。

例如，如果创建一个部分，其中包含带有边框的容器内的图像，则生成的 HTML 可能是：

<li>
  <div class="2px-border">
    <img src="somesrc">
  </div>
</li>

它通过每个部分的控件（例如按钮和添加/删除选项）呈现给用户。用户通过控件进行的更改会更改 HTML，并且只有 HTML 会保存到数据库中。

至少，这是一种选择。