Сохранение данных в PHP / Mysql с встроенным редактированием в CKEditor

Я хочу использовать «встроенное редактирование» нового CKEditor 4 ( http://docs.ckeditor.com/#!/guide/dev_inline-section-2 ), но не может найти какой-либо пример сохранения данных с помощью PHP / MySQL. Вы можете мне помочь?

Solutions Collecting From Web of "Сохранение данных в 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, который я буду использовать для AJAXing результатов.

 <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, который будет действовать, когда скрипт POST обновит 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 – это не что иное, как объект, который вы использовали для создания функциональности.

Большое спасибо за код. Попробуйте улучшить код с помощью file_put_contents ('page.php', stripslashes ($ _POST ['content'])); И добавьте в div onBlur = "ClickToSave ()", и теперь вы можете удалить кнопку сохранения.