使用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
        })
    }
// ]]>

就是这样,你不需要任何其他客户端.

在服务器上,您必须具有PHP代码,该代码将在脚本POST更新的HTML时执行.该脚本必须被称为save.php,如果您逐字使用我的代码,则该脚本位于HTML所在的目录中.我在这里的单行将只将您的HTML保存在/ tmp文件夹中的临时文件中.随意添加你的MySQL魔法.

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