Save changes made to "contentEditable" sections back to original HTML file

Question

How could I save changes made to "contentEditable" sections back to original HTML file. Is this even possible?

I need to create a single html file that has sections for user changes. Using their web browser, I would like the user to be able to "save" the changes so that the original HTML file would actually be updated. This file might be stored on the user's PC, it might end up hosted on a server. Wherever it is, it needs to write the changes back to the HTML file.

EDIT: Maybe some more details will help. I am looking to create a dynamic character sheet for all the RPGs I GM. I have used doc sharing services, but the interactive and dynamic nature of HTML+javascript offer more of what I need. Designing the file is easy enough. I just want players to open it in a web browser (even if stored on their desktop), make notes and edits, and then click a "save your character" button that will write the elements they changed back to the original HTML file. If there's no conceivable way to do this, that ok, I would just like some definitive info.

Answer 1

The file lives on a server somewhere, and the browser retrieves the files from that server, after which you can mess with contentEditable content, so to get the changes propagated to the original files, you'll need at least two things:

1. an event handler on the element(s) that have the contentEditable property, so that you can hook into their content modifications.
2. an API on the server that lets you tell it to update file X with content Y

The basic approach would be:

1. load HTML from server in browser
2. click on element with contentEditable property and start editing
3. finish editing, and have the element's javascript handler kick in (see https://stackoverflow.com/a/14043919/740553 for how to do that).
4. take the current URL, and the route to the element you just changed, and its new content, and then POST that to the server. This requires that:
5. the server is running an accepting route that listens for POST data on some route like ..../changepage (without accepting input from just anyone, of course), and that:
6. can take a POSTed filename, element path, and content string, opens up that file, finds the element in question, replaces its content, and packs it back up into a new file with the same filename as before.

This is, to say the least, extremely fragile and prone to bugs as well as abuse. There are better ways to do this, and pretty much all of them rely on having a content server, and a page that loads in content for very specifically editable elements from your content server, so that showing, editing, and saving content all happens to "one thing" instead of to elements that need to resolved in .html files based on their element path.

Or, making things even easier, using something like React to make most of that virtually instant. Although, of course, you'll still be left with writing your server such that it can serve up content, and accept modification requests.

Unfortunately for you, what you want to do is actually extremely hard to do well, as well as securely.