Spara data till PHP / Mysql med inline-redigering i CKEditor

Du behöver lite AJAX-magi. Via JavaScript inne på sidan får du den redigerade HTML-koden. Sedan skickar du det till servern där ett PHP-skript hämtar det och kan skicka det till MySQL.

Här är ett enkelt testfall som visar dig repen.

Låt oss börja med den redigerbara HTML-koden.

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

Vi behöver också en "Spara"-knapp som kommer att användas för att starta POST-händelsen.

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

En sådan knapp skulle vi kunna placera i själva CKEditors verktygsfält, men det skulle kräva mer kodning och jag överlåter det till någon som är bättre på JavaScript än jag.

Naturligtvis vill du inkludera CKEditor. För min exempelkod kommer jag också att använda jQuery, som jag kommer att använda för att AJAXing av resultaten.

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

Nu kommer skriptet att köras när du trycker på "Spara"-knappen. Den kommer att använda CKeditor för att ta tag i den redigerade HTML-koden och sedan jQuery för att skicka den.

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

Det här är det, du behöver inget annat på klientsidan.

På servern måste du ha PHP-koden som fungerar när skriptet POSTAR den uppdaterade HTML-koden. Skriptet måste heta save.php och placeras i samma katalog som HTML-koden finns om du använder min kod ordagrant. Min one-liner här kommer bara att spara din HTML i en temporär fil i /tmp-mappen. Lägg gärna till din MySQL-magi istället.

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