使用 CKEditor 中的内联编辑将数据保存到 PHP/Mysql
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13625434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Save data to PHP / Mysql with inline edit in CKEditor
提问by horez
I want to use "inline edit" of the new CKEditor 4 (http://docs.ckeditor.com/#!/guide/dev_inline-section-2), but can not find any example of how to save the data with PHP / MySQL. Can you help me?
我想使用新 CKEditor 4 ( http://docs.ckeditor.com/#!/guide/dev_inline-section-2) 的“内联编辑” ，但找不到任何关于如何使用 PHP 保存数据的示例/ MySQL。你能帮助我吗？
回答by misterakko
You need some AJAX magic. Via JavaScript inside the page you get the edited HTML. Then you send it to the server where a PHP script gets it and can pass it onto MySQL.
你需要一些 AJAX 魔法。通过页面内的 JavaScript，您可以获得编辑后的 HTML。然后你将它发送到一个 PHP 脚本获取它的服务器，并可以将它传递给 MySQL。
Here is a simple test case which will show you the ropes.
这是一个简单的测试用例，它将向您展示绳索。
Let's start with the editable HTML.
让我们从可编辑的 HTML 开始。
<div id='textToBeSaved' contenteditable='true'>
<p>Using the <strong>Terminal</strong> in OS X makes you all-powerful.</p>
</div>
We also need a "Save" button which will be used to start the POST event.
我们还需要一个“保存”按钮，用于启动 POST 事件。
<button onclick='ClickToSave()'>Save</button>
Such a button could well we positioned in the CKEditor toolbar itself, but that would require more coding and I'll leave it to someone who's better at JavaScript than me.
这样的按钮可以很好地放置在 CKEditor 工具栏中，但这需要更多的编码，我会把它留给比我更擅长 JavaScript 的人。
Of course you want to include CKEditor. For my sample code I'll also make use of jQuery, which I'll use for AJAXing the results.
当然你想包括CKEditor。对于我的示例代码，我还将使用 jQuery，我将使用它对结果进行 AJAX。
<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>
Now the script which will execute when you press the "Save" button. It will use CKeditor to grab the edited HTML, then jQuery to send it.
现在，当您按下“保存”按钮时将执行的脚本。它将使用 CKeditor 获取编辑后的 HTML，然后使用 jQuery 发送它。
<script type='text/javascript' language='javascript'>
// <![CDATA[
function ClickToSave () {
var data = CKEDITOR.instances.textToBeSaved.getData();
$.post('save.php', {
content : data
})
}
// ]]>
This is it, you don't need anything else clientside.
就是这样，您不需要任何其他客户端。
On the server, you must have the PHP code which will act when the script POSTs the updated HTML. The script must be called save.php and be positioned in the same directory where the HTML is if you use my code verbatim. My one-liner here will just save your HTML in a temporary file inside the /tmp folder. Feel free to add your MySQL magic instead.
在服务器上，您必须拥有 PHP 代码，该代码将在脚本 POST 更新的 HTML 时起作用。如果您逐字使用我的代码，则该脚本必须被称为 save.php 并位于 HTML 所在的同一目录中。我这里的单行只是将您的 HTML 保存在 /tmp 文件夹内的临时文件中。随意添加您的 MySQL 魔法。
<?php
file_put_contents('/tmp/serverside.html', $_POST['content']);
?>
回答by Joseph Woodward
This is the way I've done it in the past:
这是我过去的做法：
The current_page_idrelates to the table row we wish to update, otherwise we wouldn't know what record we need to update.
在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>
The inside of your php_file_to_post_to.phpPHP file you simply catch the ajax post request and update the row based off of the page_idvariable which has also been posted along with the edited content.
在php_file_to_post_to.phpPHP 文件的内部，您只需捕获 ajax 发布请求并根据page_id已与编辑内容一起发布的变量更新行。
回答by Sahal
This is how you will get text area data
这是您获取文本区域数据的方式
CKEDITOR.instances.editor1.getData()
CKEDITORis nothing but the object you used to create functionality.
CKEDITOR只不过是您用来创建功能的对象。
回答by user1966410
Thanks so much for the code. Try to improve de code with file_put_contents('page.php', stripslashes($_POST['content'])); And add to the div onBlur="ClickToSave()"and now you can to delete de save button.
非常感谢您的代码。尝试使用 file_put_contents('page.php', stripslashes($_POST['content'])); 并添加到 div onBlur="ClickToSave()"，现在您可以删除 de save 按钮。
