4

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

4

4 回答 4

7

你需要一些 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']);
?>
于 2012-12-03T20:23:27.697 回答
4

这是我过去的做法：

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

于 2013-03-26T14:03:44.273 回答
2

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

CKEDITOR.instances.editor1.getData()

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

于 2013-01-10T10:46:35.670 回答
-1

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

于 2013-01-10T10:43:26.380 回答