Question

I want to use “inline edit” of the new CKEditor 4 (http://docs.ckeditor.com/#!/guide/dev_inline-section-2), but can not find any example of how to save the data with PHP / MySQL.
Can you help me?

Answer 1

You need some AJAX magic. Via JavaScript inside the page you get the edited HTML. Then you send it to the server where a PHP script gets it and can pass it onto MySQL.

Here is a simple test case which will show you the ropes.

Let’s start with the editable HTML.

<div id='textToBeSaved' contenteditable='true'>
    <p>Using the <strong>Terminal</strong> in OS X makes you all-powerful.</p>
</div>

We also need a “Save” button which will be used to start the POST event.

<button onclick='ClickToSave()'>Save</button>

Such a button could well we positioned in the CKEditor toolbar itself, but that would require more coding and I’ll leave it to someone who’s better at JavaScript than me.

Of course you want to include CKEditor. For my sample code I’ll also make use of jQuery, which I’ll use for AJAXing the results.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='CKEditor4/ckeditor.js'></script>

Now the script which will execute when you press the “Save” button. It will use CKeditor to grab the edited HTML, then jQuery to send it.

<script type='text/javascript' language='javascript'>
// <![CDATA[
function ClickToSave () {
    var data = CKEDITOR.instances.textToBeSaved.getData();
    $.post('save.php', {
        content : data
        })
    }
// ]]>

This is it, you don’t need anything else clientside.

On the server, you must have the PHP code which will act when the script POSTs the updated HTML. The script must be called save.php and be positioned in the same directory where the HTML is if you use my code verbatim.
My one-liner here will just save your HTML in a temporary file inside the /tmp folder. Feel free to add your MySQL magic instead.

<?php
file_put_contents('/tmp/serverside.html', $_POST['content']);
?>