CkEditor ile JQuery Ajax Kullanımı

Merhaba, bir metin editörü olan CkEditor’de yazdığımız girdileri JQuery’in Ajax kütüphanesi ile veritabanına kaydedeceğiz.

Buradan (https://ckeditor.com/ckeditor-4/download) CkEditor’ü indirelim ve HTML şablonumuzda HEAD tagları arasında tanımlayalım.

CkEditor’ü görüntülememi sağlayan bir HTML betiği içerisinde form oluşturuyorum. Metin alanı için Textarea etiketini kullanıyorum.

<form id="kaydet" name="kaydet" method="post">
 <textarea name="ornek_1" id="ornek_1"></textarea><br />
 <input type="submit" id="tik" />
</form>

Oluşturduğumuz formun name değerini kaydet olarak tanımlıyorum. HTML şablonumuzda BODY tagları arasında CkEditör’ü script tagları içerisinde çağırıyorum.

<script type="text/javascript">
 CKEDITOR.replace( 'ornek_1' );
</script>

Burada yer alan ornek_1 kullandığımız Textarea etiketinin name değeridir. JQuery Ajax kodlarımı yazmaya başlayabilirim.

$(document)
    .ready(function () {
        $('#tik')
            .click(function () {
                for (var kaydet in CKEDITOR.instances) 
                    CKEDITOR.instances[kaydet].updateElement();
                $.ajax({
                    type: 'POST',
                    url: 'kaydet.php',
                    cache: false,
                    data: $('#kaydet').serialize(),
                    success: function (hesapCevap) {
                        $('#sonuc').html(hesapCevap);
                    }
                });
                return false;
            });
    });

Burada yer alan for (var kaydet in CKEDITOR.instances) satırındaki kaydet oluşturduğumuz formun name değeridir.

PHP üzerinde girdilerimi veritabanına kaydedebilirim artık.

mysql_select_db("dersler",mysql_connect("localhost","root",""));
mysql_query("SET CHARACTER SET utf8");
mysql_query("SET COLLATION_CONNECTION = 'utf8_general_ci'");
mysql_query("INSERT INTO ck (dene) VALUES ('".$_POST['ornek_1']."')");

15 thoughts on “CkEditor ile JQuery Ajax Kullanımı

hocam eyvallah çalıştı çok güzel oldu. Bloğunu favorilerime ekledim. daha çok yararlanacağım. Çok teşekkürler…

type=’button’onclick=’tinymce.triggerSave(); KategoriEkleIslem();’ value=’gönder’>

Kodlar bloklandığı için baştaki input u yazmadım

Allah tuttuğunu altın etsin inşallah. Günlerdir Türkçe kaynak yoktur diye stackoverflow-kolik olmuştum ama bir türlü işime yarayan bir çözüm bulamamıştım. Şu an şu saatte twitter’Inda kapatılmasıyla bulduğum boş zamanda google’da birde Türkçe sorgulama yaptım ve karşıma bu blog çıktı. Dediklerini harfiyen yaptıktan sonra sorunumda çözüme kavuştu. Tek kelimeyle mükemmelsin…

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.