CKEditorでインライン編集してPHP/Mysqlにデータを保存します

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を含めたいと思います。サンプルコードでは、結果のAJAX化に使用するjQueryも使用します。

<script src='https://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
        })
    }
// ]]>

これで、クライアント側には他に何も必要ありません。

サーバーには、スクリプトが更新されたHTMLをPOSTするときに機能するPHPコードが必要です。スクリプトはsave.phpと呼ばれ、コードを逐語的に使用する場合はHTMLと同じディレクトリに配置する必要があります。ここでのワンライナーは、HTMLを/tmpフォルダー内の一時ファイルに保存するだけです。代わりに、MySQLの魔法を自由に追加してください。

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