HTML editor embedded in admin page

Question

I'm working on a simple webpage for a company and the company wants to be able to edit the content themselves from time to time. However they have no programing knowledge and therefore I want to use an embedded HTML editor, I have chosen jQuery TE.

The problem is that I only know how to use this as a form, e.g.:

<form id = "wyForm" method="post" action="test.php">
    <textarea class="editor"name = "testText">Hi</textarea>
    <input type="submit" class="wymupdate" />
</form>

Then I would convert the textarea to an editor with jQuery:

<script> $('.editor').jqte() </script>

This makes it possible to send the result to a .php page that updates the database. However many times I don't want to use a textfield or a form, but just a simple object that I convert to an editor in the same way. But how do I save the change in that case?

Answer 1

Catch the form submit event and copy the content to a hidden field.

<form id = "wyForm" method="post" action="test.php">
    <div class="editor" name="testText">Hi</div>
    <input type="submit" class="wymupdate" />
    <input type="hidden" id="editorHiddenField" />
</form>

...

$('#wyForm').submit(function() {
   $('#editorHiddenField').val($('.editor').html());
});

You may need to use an API to get the content instead (I'm not familiar with the plugin), but the concept is sound.

Edit - If you don't want to use a form at all:

<div class="editor></div>
<button id="SaveButton">Save</button>

...

$(document).ready(function() {
    $('#SaveButton').click(function(e) {
        e.preventDefault();
        $.post('savepage.php', { data: $('.editor').html() }).done(function() { alert('saved!'); });
    });
});