如何使用內聯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