How do i save or update the php page using inline ckeditor?

Question

I just got the CKEditor 4 with inline editing. I want to do a CMS for a site I'm working on. Here is what I want to do:

<div contenteditable="true">
//Site code
</div>
<button onclick="">Save</button>

I would like to have a script that will do save and update the PHP file I want to edit. Just like get the content of the edited page then input it to the target file like home.php.

I did some research but I can't find a good simple code that will only update the file, just like this one "Save data to PHP / Mysql with inline edit in CKEditor". When I test it, it doesn't update but it just puts the text under div, and it doesn't update the file.

Note: I'm a newbie on this one...

score 0 · Answer 1 · answered Jul 05 '13 at 05:10

You should remember the concept of client side code (like CKEditor with JavaScript) and server side code (like PHP).

So what you need to do is to send the edited div back to the PHP page on the server (maybe via AJAX as your provided link suggested) and update the page on the server (PHP) side.

However I personally would recommend to store the content in a database and read it from there - the security impact of directly updating a PHP file is enourmous. If you don't be very strict in filtering it is very likely that you have a remote code execution flaw, meaning that anyone can execute PHP code on your server.

if you dont mind, could you give a sample? just a simple one i just dont know how ckeditor works. >.< sorry for being new in this industry xD — Jr Denorte, Jul 05 '13 at 06:25

score 0 · Answer 2 · answered Jul 05 '13 at 07:35

Use onsubmit event, it's pretty simple:

<!-- Wrap editor with form. -->
<form action="yourPHPaction.php" method="post" id="form">
    <!-- Your inline editor. -->
    <div contenteditable="true" id="editable"></div>    

    <!-- This textarea will hold data for POST request, it can be hidden. -->
    <textarea id="editorData" name="editorData"></textarea> 

    <!-- This little fellow submits the form. -->
    <button type="submit">Submit form</button>
</form>
<script>

    var textarea = CKEDITOR.document.getById( 'editorData' ),
        form = CKEDITOR.document.getById( 'form' );

    // Update textarea on form submit with editor data.
    form.$.onsubmit = function() {
        textarea.setValue( CKEDITOR.instances.editable.getData() );
    }

</script>

Additionally, at the moment, CKEditor team develops a new type of creator that invokes an inline editor based on <textarea> to simplify such process. See the ticket: https://dev.ckeditor.com/ticket/10280

and in yourphpaction.php something like this '$editordata=$_POST['editorData'] $sql="SQL command"' to store data?? — Jr Denorte, Jul 05 '13 at 08:57
can i ask if how can i make the code inside the DIV Editable adapt on the css outside? cause it have some content filters of some sort i dont know how to disable it — Jr Denorte, Jul 08 '13 at 02:23

How do i save or update the php page using inline ckeditor?

2 Answers2