在 CKEditor 中使用内联编辑将数据保存到 PHP/Mysql答案

【问题标题】：Save data to PHP / Mysql with inline edit in CKEditor在 CKEditor 中使用内联编辑将数据保存到 PHP/Mysql
【发布时间】：2012-11-17 12:08:41
【问题描述】：

我想使用新 CKEditor 4 (http://docs.ckeditor.com/#!/guide/dev_inline-section-2) 的“内联编辑”，但找不到任何使用 PHP / MySQL 保存数据的示例。你能帮帮我吗？

【问题讨论】：

您是否将 CKEditor 放入表单中？如果你在保存时这样做，你可以使用 $_POST['yourfield'] 访问数据
内联编辑是更改 div 内容的功能。我非常了解编辑器在表单中的使用，但这不是我所要求的。
ckeditor inline save/submit的可能重复

标签： php mysql ajax ckeditor

【解决方案1】：

您需要一些 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='//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']);
?>

【讨论】：

【解决方案2】：

这是我过去的做法：

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_file_to_post_to.php PHP 文件内部，您只需捕获 ajax 发布请求并根据 page_id 变量更新行，该变量也与编辑的内容一起发布。

【讨论】：

【解决方案3】：

这是获取文本区域数据的方式

CKEDITOR.instances.editor1.getData()

CKEDITOR 只不过是您用来创建功能的对象。

【讨论】：

【解决方案4】：

非常感谢您的代码。尝试使用 file_put_contents('page.php', stripslashes($_POST['content'])); 改进解码代码并添加到 div onBlur="ClickToSave()" 现在您可以删除 de save 按钮了。

【讨论】：

stripslashes 与 CKEDITOR 有什么关系：D