Saving data in PHP / Mysql with built-in editing in CKEditor

Question

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

Answer 1

You need AJAX magic. Through JavaScript inside the page, you get edited HTML. Then you send it to the server where the PHP script receives it and can transfer it to MySQL.

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

Start with 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 that will be used to trigger the POST event.

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

Such a button could well position itself on the CKEditor toolbar, but this will require more coding, and I will leave it to someone who is better at JavaScript than me.

Of course you want to enable CKEditor. For my sample code, I will also use jQuery, which I will use for AJAXing 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 that will be executed when the "Save" button is clicked. It will use CKeditor to capture 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 }) } // ]]> 

Here it is, you don’t need anything else for customers.

On the server, you must have PHP code that will act when the POST script updates the HTML. The script should be called save.php and located in the same directory as the HTML, if you use my code verbatim. My single line font here just saves 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']); ?> 

Answer 2

So I did this in the past:

current_page_id refers to the row of the table we want to update, otherwise we did not know which record we needed 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> 

Inside your php_file_to_post_to.php PHP file, you simply catch the ajax post message and update the line based on the page_id variable, which was also placed with the edited content.

Answer 3

Here's how you get text area data

 CKEDITOR.instances.editor1.getData() 

CKEDITOR is nothing more than the object you used to create the functionality.

Answer 4

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