Ckeditor 5 ajax ile veri alma?
Arkadaşlar merhaba, daha önce ckeditor4 ile şu şekilde verileri alabiliyordum:
<script>
CKEDITOR.replace('blogyazi_icerik');
$(".btn").click(function (e) {
e.preventDefault();
var myData= $("form").serializeArray();
myData.push({name:'blogyazi_icerik',value:CKEDITOR.instances.blogyazi_icerik.getData()});
$.ajax({
type: "post",
url: '<?php echo $arow->site_url; ?>/sistem/icerik-ekle.php',
data: myData,
beforeSend: function () {
$('.btn').hide();
$('.sonuc').html('<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>');
},
success: function(cevap) {
$('.sonuc').html('İçerik başarıyla kaydedildi, onaylandıktan sonra yayımlanacaktır.');
},
error: function() {
$('.btn').show();
$('.sonuc').html('Bir hata oldu. Eksik alan bırakmadığınızdan emin olun ya da daha sonra tekrar deneyin.');
}
});
});
</script>
Artık ckeditor5 i kullanmak istiyorum ama bir türlü beceremedim. Mevcut kodlarım şu şekilde ama çalışmıyor:
<script>
ClassicEditor
.create(document.querySelector('#blogyazi_icerik'))
.catch(error => {
console.error(error)
});
$(".btn").click(function (e) {
e.preventDefault();
var myData= $("form").serializeArray();
myData.push({name:'blogyazi_icerik',value:CKEDITOR.instances.blogyazi_icerik.getData()});
$.ajax({
type: "post",
url: '<?php echo $arow->site_url; ?>/sistem/icerik-ekle.php',
data: myData,
beforeSend: function () {
$('.btn').hide();
$('.sonuc').html('<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>');
},
success: function(cevap) {
$('.sonuc').html('İçerik başarıyla kaydedildi. Onaylandıktan sonra yayımlanacaktır.');
},
error: function() {
$('.btn').show();
$('.sonuc').html('Bir hata oldu. Eksik alan bırakmadığınızdan emin olun ya da daha sonra tekrar deneyin.');
}
});
});
</script>
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (1)
CKEditor5 ile getData() işlemi artık CKEDITOR.instances<instance_name>.getData()
şeklinde değil de <instance_name>.getData()
şeklinde olmalı. Bunun için ClassicEditor.create()
işlemi sırasında başarıyla oluşturma durumunda bir instance ataması yapmalısın.
let myCustomEditor;
ClassicEditor
.create(document.querySelector('#blogyazi_icerik'))
.then( newEditor => {
myCustomEditor = newEditor;
})
.catch( error => {
console.error(error);
});
Yukarıdaki kod parçacığı şeklinde instance tanımlamasını yaptıktan sonra myData.push()
işleminde yolladığın objede value
değerini artık CKEDITOR.instances.blogyazi_icerik.getData()
değil de myCustomEditor.getData()
şeklinde yapmalısın.
Ayrıca yanlış anlamazsan, bu gibi karşılaşacağın diğer durumlarda öncelikle ilgili servisin dökümantasyonlarını incelemeni tavsiye ederim. Basit birkaç aramada çözümleyebileceğin sorunlar için herhangi bir forum veya soru-cevap platformunda yardım isteği açmak mantıklı değil. Örneğin şu linke uğramış olsaydın soruna daha hızlı cevap bulabilirdin.