如何使用内联ckeditor保存或更新php页面

Question

我刚刚得到了带有内联编辑的CKEditor 4。我想为我正在工作的网站做一个CMS。以下是我想做的：

<div contenteditable="true">
//Site code
</div>
<button onclick="">Save</button>

我想要一个脚本来保存和更新我想要编辑的PHP文件。就像获取编辑页面的内容，然后像home.php一样将其输入到目标文件中。

我做了一些研究，但我找不到一个好的简单代码，只会更新文件，就像这一个"用CKEditor中的内联编辑将数据保存到PHP/Mysql"。当我测试它时，它不会更新，但它只是将文本放在div下，并且不会更新文件。

注意：我是这方面的新手。。。

Answer 1

您应该记住客户端代码（如带JavaScript的CKEditor）和服务器端代码（如PHP）的概念。

因此，您需要做的是将编辑后的div发送回服务器上的PHP页面（可能如您提供的链接所建议的那样通过AJAX），并在服务器（PHP）端更新页面。

然而，我个人建议将内容存储在数据库中并从中读取——直接更新PHP文件的安全影响是巨大的。如果你在过滤方面不严格，很可能你有远程代码执行缺陷，这意味着任何人都可以在你的服务器上执行PHP代码。

Answer 2

使用onsubmit事件，非常简单：

<!-- Wrap editor with form. -->
<form action="yourPHPaction.php" method="post" id="form">
    <!-- Your inline editor. -->
    <div contenteditable="true" id="editable"></div>    
    <!-- This textarea will hold data for POST request, it can be hidden. -->
    <textarea id="editorData" name="editorData"></textarea> 
    <!-- This little fellow submits the form. -->
    <button type="submit">Submit form</button>
</form>
<script>
    var textarea = CKEDITOR.document.getById( 'editorData' ),
        form = CKEDITOR.document.getById( 'form' );
    // Update textarea on form submit with editor data.
    form.$.onsubmit = function() {
        textarea.setValue( CKEDITOR.instances.editable.getData() );
    }
</script>

此外，目前，CKEditor团队开发了一种新型的创建者，该创建者调用基于<textarea>的内联编辑器来简化这一过程。查看票证：https://dev.ckeditor.com/ticket/10280