4

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?

misterakko
  • 123
  • 6
horez
  • 119
  • 1
  • 1
  • 5
  • do you put the CKEditor into a form ? If you do that at save you access the data with $_POST['yourfield'] – Alexandru Chelariu Nov 29 '12 at 12:05
  • 1
    Inline editing is the feature to change the contents of a div. I know very well the use of the editor with the form, but it is not what I asked. – horez Nov 29 '12 at 16:07
  • possible duplicate of [ckeditor inline save/submit](http://stackoverflow.com/questions/13603575/ckeditor-inline-save-submit) – Somnath Muluk Dec 03 '12 at 17:18

4 Answers4

7

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']);
?>
misterakko
  • 123
  • 6
4

This is the way I've done it in the past:

The current_page_id relates to the table row we wish to update, otherwise we wouldn't know what record we need to update.

<div id="editable">My body text</div>
<input type="hidden" name="page_id" id="current_page_id" value="10" />

<script type="text/javascript">

CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('editable', {
    on: {
        blur: function( event ) {

            var params = {
                page_id: $("#current_page_id").val(),
                body_text: event.editor.getData()
            };

            $.ajax({
                url: 'php_file_to_post_to.php',
                global: false,
                type: "POST",
                dataType: "text json",
                data: params,
                success: function(result) {
                    console.log(result);
                }
            });

        }
    }
});

</script>

The inside of your php_file_to_post_to.php PHP file you simply catch the ajax post request and update the row based off of the page_id variable which has also been posted along with the edited content.

Joseph Woodward
  • 9,191
  • 5
  • 44
  • 63
2

This is how you will get text area data

CKEDITOR.instances.editor1.getData()

CKEDITOR is nothing but the object you used to create functionality.

Sahal
  • 4,046
  • 15
  • 42
  • 68
-1

Thanks so much for the code. Try to improve de code with file_put_contents('page.php', stripslashes($_POST['content'])); And add to the div onBlur="ClickToSave()" and now you can to delete de save button.

user1966410
  • 1
  • 1