Сохранение данных в PHP/Mysql с помощью встроенного редактирования в CKEditor
Я хочу использовать "встроенное редактирование" нового редактора 4 (http://docs.ckeditor.com /#!/руководство/dev_inline-раздел-2), но не могу найти ни одного примера того, как сохранить данные с помощью PHP/MySQL. Вы можете мне помочь?
4 answers
Вам нужна магия 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, который я буду использовать для обработки результатов.
<script src='//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']);
?>
Вот как я делал это в прошлом:
current_page_id относится к строке таблицы, которую мы хотим обновить, иначе мы не знали бы, какую запись нам нужно обновить.
<div id="editable">My body text</div>
<input type="hidden" name="page_id" id="current_page_id" value="10" />
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('editable', {
on: {
blur: function( event ) {
var params = {
page_id: $("#current_page_id").val(),
body_text: event.editor.getData()
};
$.ajax({
url: 'php_file_to_post_to.php',
global: false,
type: "POST",
dataType: "text json",
data: params,
success: function(result) {
console.log(result);
}
});
}
}
});
</script>
Внутри вашего PHP-файла php_file_to_post_to.php вы просто перехватываете запрос ajax post и обновляете строку на основе переменной page_id, которая также была опубликована вместе с отредактированным содержимым.
Вот как вы получите данные текстовой области
CKEDITOR.instances.editor1.getData()
CKEDITOR это не что иное, как объект, который вы использовали для создания функциональности.
Большое спасибо за код. Попробуйте улучшить код de с помощью file_put_contents('page.php ', косые черты ($_POST['содержимое'])); И добавьте в div onblur="Clicktosave()", и теперь вы можете удалить кнопку сохранения.