Question

Now, everyone knows the cute little trick where you punch this Javascript code into your browser’s URL bar:

document.body.contentEditable = 'true'; document.designMode = 'on'; void 0

And El Presto! You can start freely editing a website just how you want it.

The only problem is – you can’t save it!

After doing some quick research, I found that most likely, the best way to save this was by the method suggested here, which consists of somehow turning the page into a giant form and posting it to a MySQL database.

Sure, while doing this is great, it’s going to end up saving my whole page – and not just the section or container that I want to edit – and that’s a major problem because us developers need to preserve lines of code such as…

<?php include('header.php'); ?>

…that aren’t outputted in the HTML. In other words: it’s going to save my page as it appears in outputted HTML, overwriting what is in my original PHP file.

What I’m asking how to do, is how would I go about saving a website edited like this, but just to save or update one or two editable containers on the website (not the whole thing so my PHP code doesn’t get overwritten)?

For example:

<p>This Won't get updated when the page is "saved"</p>
<div id="update-this-contianer">
   This area will be passed on to the MySql database, and then updated into the same section of the original file.
</div><!-- End Area To Update -->

Answer 1

Instead of setting contentEditable on the entire body, just put it on the element you want to edit. Then, send the contents of that element to the server. When you want to get the data back again, you just include that section in the appropriate place.