Question

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

Answer 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']);
?>

Answer 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变量更新行，该变量也与已编辑的内容一起发布。

Answer 3

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

CKEDITOR.instances.editor1.getData()

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

Answer 4

非常感谢代码。尝试使用file_put_contents（'page.php'， stripslashes （$ _ POST ['content']））改进de代码; 并添加到div onBlur =“ClickToSave（）”，现在您可以删除de save按钮。

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

4 个答案: