Запазване на данни в PHP / Mysql с вградена редакция в CKEditor

Имате нужда от малко AJAX магия. Чрез JavaScript вътре в страницата получавате редактирания HTML. След това го изпращате на сървъра, където PHP скрипт го получава и може да го предаде на MySQL.

Ето един прост тестов случай, който ще ви покаже въжетата.

Нека започнем с редактируемия HTML.

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

Нуждаем се и от бутон „Запазване“, който ще се използва за стартиране на POST събитието.

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

Такъв бутон бихме могли да позиционираме в самата лента с инструменти на CKEditor, но това ще изисква повече кодиране и ще го оставя на някой, който е по-добър в JavaScript от мен.

Разбира се, вие искате да включите CKEditor. За моя примерен код ще използвам и jQuery, който ще използвам за AJAX преобразуване на резултатите.

<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>

Сега скриптът, който ще се изпълни, когато натиснете бутона "Запазване". Той ще използва CKeditor, за да вземе редактирания HTML, след това jQuery, за да го изпрати.

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

Това е всичко, нямате нужда от нищо друго от страна на клиента.

На сървъра трябва да имате PHP кода, който ще действа, когато скриптът ПОСТЪПВА актуализирания HTML. Скриптът трябва да се нарича save.php и да бъде позициониран в същата директория, където е HTML, ако използвате моя код дословно. Моят едноредов тук просто ще запази вашия HTML във временен файл в папката /tmp. Чувствайте се свободни да добавите вашата MySQL магия вместо това.

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