Zapisz dane do PHP / Mysql z edycją inline w CKEditor

Potrzebujesz trochę magii AJAX. Poprzez JavaScript wewnątrz strony otrzymujesz edytowany kod HTML. Następnie wysyłasz go na serwer, gdzie skrypt PHP pobiera go i może przekazać do MySQL.

Oto prosty przypadek testowy, który pokaże ci liny.

Zacznijmy od edytowalnego kodu HTML.

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

Potrzebujemy również przycisku „Zapisz”, który zostanie użyty do rozpoczęcia wydarzenia POST.

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

Taki przycisk moglibyśmy równie dobrze umieścić w samym pasku narzędzi CKEditor, ale wymagałoby to więcej kodowania i pozostawię to komuś, kto jest lepszy w JavaScript ode mnie.

Oczywiście chcesz dołączyć CKEditor. Dla mojego przykładowego kodu skorzystam również z jQuery, którego użyję do AJAXingu wyników.

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

Teraz skrypt, który wykona się po naciśnięciu przycisku „Zapisz”. Użyje CKeditor, aby pobrać edytowany kod HTML, a następnie jQuery, aby go wysłać.

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

To jest to, nie potrzebujesz niczego innego po stronie klienta.

Na serwerze musisz mieć kod PHP, który będzie działał, gdy skrypt POST zaktualizowany kod HTML. Skrypt musi nazywać się save.php i znajdować się w tym samym katalogu, w którym znajduje się kod HTML, jeśli użyjesz mojego kodu dosłownie. Mój jednowierszowy kod tutaj po prostu zapisze Twój kod HTML w pliku tymczasowym w folderze /tmp. Zamiast tego możesz dodać swoją magię MySQL.

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