How would you save a contenteditable div's content in a database with a PHP form?

Question

I have a form that has a <textarea> that I would like to replace with a <div contenteditable="true". Is there an easy way to insert that content into my MySQL database with PHP?

Answer 1

I just implemented this, so I don't know what bugs there are right now, but it does work. I also know that it's pretty hacked together and there is probably a more elegant solution to doing this, but this one works.

I'm making a simple assumptions here: Your textarea contains html elements in it and doesn't mess up your database (using whatever method you like best)

Community Wiki'd because it's something that other people might have better ideas on.

1. First convert your textareas to divs, don't add extra space between the div and the content (it should be like this: <div id="content" contenteditable="true"><p>First paragraph...

2. Pick an id for each div that's going to now be contenteditable, on my site I've decided on the really simple content id, and I only have one div that's editable on each page that needs editing (you might need more. Each div needs it's own id).

3. Make a form, AFTER (or before, just don't put your div inside of the form, actually, that probably doesn't matter, but just to be safe), put a hidden textarea (display:none; visibility:none) with no content.

4. Add a hidden input field that contains a unique identifier for your database's reference to the current page.

5. Place a submit button OUTSIDE of the form. This is done because you're going to call a javascript function to put your div's content into the hidden textarea and submit the form after that.

6. Add an onclick attribute to the submit button, have it call the function to update (mine's upport because it updates my portfolio)

7. Make the function.

   1. Create a new variable that contains the div's content (var nt = document.getElementById('contentId').innerHTML;)
   2. Add that content to the hidden textarea (document.forms["formId"].nameOfTextarea.value += nt;)
   3. Submit the form (document.forms["upport"].submit();)

8. Now make the form processor the way you normally would.