Gegevens opslaan in PHP / Mysql met inline bewerking in CKEditor

Je hebt wat AJAX-magie nodig. Via JavaScript binnen de pagina krijg je de bewerkte HTML. Vervolgens stuur je het naar de server waar een PHP-script het krijgt en kan het doorgeven aan MySQL.

Hier is een eenvoudige testcase die u de kneepjes van het vak zal laten zien.

Laten we beginnen met de bewerkbare HTML.

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

We hebben ook een knop "Opslaan" nodig die zal worden gebruikt om de POST-gebeurtenis te starten.

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

Zo'n knop zou best in de CKEditor-werkbalk zelf kunnen worden geplaatst, maar dat vereist meer codering en ik laat het over aan iemand die beter is in JavaScript dan ik.

Natuurlijk wil je CKEditor opnemen. Voor mijn voorbeeldcode zal ik ook gebruik maken van jQuery, die ik zal gebruiken voor het AJAXen van de 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 het script dat wordt uitgevoerd wanneer u op de knop "Opslaan" drukt. Het zal CKeditor gebruiken om de bewerkte HTML te pakken en vervolgens jQuery om het te verzenden.

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

Dit is het, je hebt niets anders nodig aan de clientzijde.

Op de server moet u de PHP-code hebben die zal werken wanneer het script de bijgewerkte HTML POST. Het script moet save.php heten en in dezelfde map staan ​​als de HTML als je mijn code woordelijk gebruikt. Mijn oneliner hier zal je HTML gewoon opslaan in een tijdelijk bestand in de map /tmp. Voel je vrij om in plaats daarvan je MySQL-magie toe te voegen.

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