Simpan data ke PHP / Mysql dengan edit sebaris di CKEditor

Anda membutuhkan keajaiban AJAX. Melalui JavaScript di dalam halaman Anda mendapatkan HTML yang diedit. Kemudian Anda mengirimkannya ke server tempat skrip PHP mendapatkannya dan dapat meneruskannya ke MySQL.

Berikut ini adalah kasus uji sederhana yang akan menunjukkan kepada Anda caranya.

Mari kita mulai dengan HTML yang dapat diedit.

<div id='textToBeSaved' contenteditable='true'>
    <p>Using the <strong>Terminal</strong> in OS X makes you all-powerful.</p>
</div>

Kami juga membutuhkan tombol "Simpan" yang akan digunakan untuk memulai acara POST.

<button onclick='ClickToSave()'>Save</button>

Tombol seperti itu bisa kita posisikan di toolbar CKEditor itu sendiri, tetapi itu akan membutuhkan lebih banyak pengkodean dan saya akan menyerahkannya kepada seseorang yang lebih baik dalam JavaScript daripada saya.

Tentu saja Anda ingin memasukkan CKEditor. Untuk kode sampel saya, saya juga akan menggunakan jQuery, yang akan saya gunakan untuk AJAXing hasilnya.

<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>

Sekarang skrip yang akan dijalankan ketika Anda menekan tombol "Simpan". Ini akan menggunakan CKeditor untuk mengambil HTML yang diedit, lalu jQuery untuk mengirimkannya.

<script type='text/javascript' language='javascript'>
// <![CDATA[
function ClickToSave () {
    var data = CKEDITOR.instances.textToBeSaved.getData();
    $.post('save.php', {
        content : data
        })
    }
// ]]>

Ini dia, Anda tidak perlu apa-apa lagi di sisi klien.

Di server, Anda harus memiliki kode PHP yang akan bertindak saat skrip POST HTML yang diperbarui. Script harus disebut save.php dan ditempatkan di direktori yang sama dengan HTML jika Anda menggunakan kode saya kata demi kata. One-liner saya di sini hanya akan menyimpan HTML Anda dalam file sementara di dalam folder /tmp. Jangan ragu untuk menambahkan keajaiban MySQL Anda.

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