使用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，并将其用于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
        })
    }
// ]]>

就是这样，您不需要客户端其他任何东西。

在服务器上，您必须具有在脚本POST更新的HTML时将起作用的PHP代码。如果您逐字使用我的代码，该脚本必须名为save.php，并且位于HTML所在的目录中。我这里的单行代码只是将您的HTML保存在/
tmp文件夹中的一个临时文件中。随意添加您的MySQL魔术。

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