Ckeditor 5 Üzerine İpuçları

Web ajans scriptinin CKeditor 4'ten CKditor 5'e geçirirken epey zorlandım, aslında basit konular olsa dökümantasyon fazla geniş aradığınızı bulmakta zorlanıyorsunuz.

CKEditor 5'i burada bulunan bağlantı üzerinden kendi isteklerinize göre build edip indirmelisiniz.

İndirdiğiniz dosyalar içerisinde sadece build klasörü size gerekli gerisi çöp.

Build klasörünü ckeditor5 olarak kaydedip, projenizde uygun bir yere atın ardından. formunza textarea alanı ekleyip, bir id verin.

<textarea id="aciklama" name="aciklama"></textarea>

Sayfanızın </body> kapanış etiketinin hemen üstüne; aşağıdaki kodları ekleyin.

<script src="ckeditor5/ckeditor.js"></script> //BURADAKİ .JS YOLUNU DOĞRU GİRDİĞİNİZDEN EMİN OLUN
<script>
      ClassicEditor
      .create( document.querySelector( '#aciklama' ), {
        licenseKey: '',
      } )
      .then( editor => {
        window.editor = editor;
      } )
      .catch( error => {
        console.error( error );
      } );
</script>

Ajax veya normal bir post işlemi ile sorunsuzca post edebilirsiniz. CKEditor 4'deki gibi update, insert işlemleri için harici kod yazmıyoruz. Ancak, örenğin bir bootstrap modalı içerisinde form açtırıp, formda bulunan textarea alanına ajax ile post olunduktan sonra dönen json formattaki response bilgisini şu şekilde alamıyoruz.

$.ajax({
       url:"admin-crud-islemleri-ajax",
       method:"POST",
       data:{urun_duzenle_hazirlik_id:urun_duzenle_hazirlik_id},
       dataType:"json",
       success:function(data){
        $('#userModal').modal('show');
        $('#aciklama').val(data.urun_aciklama); //BU ŞEKİLDE ALMAYA ÇALIŞIRSANIZ OLMAYACAKTIR.
       }
     })
 });

Onun yerine

$.ajax({
       url:"admin-crud-islemleri-ajax",
       method:"POST",
       data:{urun_duzenle_hazirlik_id:urun_duzenle_hazirlik_id},
       dataType:"json",
       success:function(data){
        $('#userModal').modal('show');
        editor.setData(data.urun_aciklama); //DOĞRU KULLANIM
       }
     })
 });

ToolBar'daki menüleri listeleme

let menuler = Array.from( editor.ui.componentFactory.names() );
console.log(menuler)

ToolBar'da ki menülerden özellik kaldırma

ClassicEditor
  .create( document.querySelector( '.mesaj' ), {
    toolbar: [ 'bold', 'italic', 'link', 'undo', 'redo', 'codeBlock', 'uploadImage' ]
    }
})