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

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 代码，该代码将在脚本发布更新的 HTML 时执行。如果您逐字使用我的代码，该脚本必须称为 save.php 并且位于 HTML 所在的同一目录中。我这里的单行代码只是将您的 HTML 保存在/tmp 文件夹内的一个临时文件中。请随意添加您的 MySQL 魔法。

<?php
file_put_contents('/tmp/serverside.html', $_POST['content']);
?>