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