Uložte data do PHP / Mysql s inline editací v CKEditoru

Potřebujete nějaké kouzlo AJAX. Prostřednictvím JavaScriptu uvnitř stránky získáte upravený HTML. Poté jej odešlete na server, kde jej PHP skript získá a může jej předat do MySQL.

Zde je jednoduchý testovací případ, který vám ukáže lana.

Začněme s upravitelným HTML.

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

Potřebujeme také tlačítko "Uložit", které bude použito ke spuštění události POST.

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

Takové tlačítko bychom klidně mohli umístit do panelu nástrojů CKEditoru samotného, ​​ale to by vyžadovalo více kódování a nechám to na někom, kdo je v JavaScriptu lepší než já.

Samozřejmě chcete zahrnout CKEditor. Pro svůj ukázkový kód také využiji jQuery, který použiji pro AJAXing výsledků.

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

Nyní skript, který se spustí po stisknutí tlačítka "Uložit". K zachycení upraveného HTML použije CKeditor a k jeho odeslání pak jQuery.

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

To je ono, nepotřebujete nic dalšího na straně klienta.

Na serveru musíte mít kód PHP, který bude fungovat, když skript POST aktualizovaný HTML. Skript se musí jmenovat save.php a musí být umístěn ve stejném adresáři, kde je HTML, pokud použijete můj kód doslovně. Moje jednořádková linka zde pouze uloží vaše HTML do dočasného souboru ve složce /tmp. Klidně místo toho přidejte své kouzlo MySQL.

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