Maybe my question is a little confusing, hopefully this will clarify what am asking. So if you ever seen those template builders websites where the user gets to design the a webpage on a website. You know, changing the size of a text box, the size of an image, having elements in a certain order. And then when they save or submit and try to go to the page they built, it shows as a regular webpage with all their edits. And they can go back and change it, and it changes on the fly.
An example of this is Shopify, where you choose a theme and then change some settings in the theme. Such as the overall font, theme colors, and even when you build your own home page. What I mean by that is, you are able to add a “collection” of products in one area, then maybe underneath that you add a “newsletter” area where you collect users emails, etc… All of that are elements and you choose where to put them on the webpage, and the edits doesn’t reflect on the home page until you click “save“.
So my question is, how do they save that data and apply it to the HTML and CSS so that when a user goes to the home page they will see the exact edits as the admin did?
A general idea would be great, as long as it makes sense 😅
Thank you for your help.
Advertisement
Answer
One method (which I believe is used by CKEditor) is to have a 2-way parser: one that turns the nested interfaces (and properties on them) into HTML, and one that turns the HTML back into the interfaces.
All that’s saved on the backend is the plain HTML that results from the user’s changes. When the user goes to edit the website, the contents of the HTML contents are parsed and separated into a more user-friendly display for the user (possibly with buttons to add/remove stuff and apply styles).
For example, if one creates a section which contains an image inside a container with a border, the HTML generated might be:
<li>
<div class="2px-border">
<img src="somesrc">
</div>
</li>
which is presented to the user with controls (such as buttons and add/remove options) for each section. Changes the user makes via the controls changes the HTML, and only the HTML gets saved to the database.
That’s one option, at least.