Gem data til PHP / Mysql med inline redigering i CKEditor

Du har brug for noget AJAX-magi. Via JavaScript inde på siden får du den redigerede HTML. Så sender du det til serveren, hvor et PHP-script henter det og kan sende det til MySQL.

Her er en simpel testcase, som viser dig rebene.

Lad os starte med den redigerbare HTML.

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

Vi har også brug for en "Gem"-knap, som vil blive brugt til at starte POST-begivenheden.

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

Sådan en knap kunne vi godt placere i selve CKEditor-værktøjslinjen, men det ville kræve mere kodning, og jeg overlader det til nogen, der er bedre til JavaScript end mig.

Selvfølgelig vil du inkludere CKEditor. Til min prøvekode vil jeg også gøre brug af jQuery, som jeg vil bruge til AJAXing af resultaterne.

<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 scriptet, som vil køre, når du trykker på knappen "Gem". Den vil bruge CKeditor til at få fat i den redigerede HTML, og derefter jQuery for at sende den.

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

Dette er det, du behøver ikke noget andet klientside.

På serveren skal du have PHP-koden, som vil fungere, når scriptet sender den opdaterede HTML. Scriptet skal hedde save.php og placeres i samme mappe, hvor HTML'en er, hvis du bruger min kode ordret. Min one-liner her vil bare gemme din HTML i en midlertidig fil inde i /tmp mappen. Tilføj gerne din MySQL-magi i stedet for.

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