React Ck editor kullanımı

Gerekli kütüphane: react-ckeditor-component

Documantasyona göre Example uygulaması yapıldığında 

this.onChange = this.onChange.bind(this);

Satırı eksik olduğu olduğu için hata çıkmakta.Satırını constructer 'a eklediğinizde düzelecektir.

Componentin görünümü

Ben bu componentimi AddBlog componentimde kullağım.

Şimdi burada Redux ında çözüm bulduğu propblem ile karşılaştık. Bu problem Addblog componentimin state lerini child component olan ckEditor componentimde güncelleyebilirim problemidir. Benim aklıma gelen 3 tane çözüm yolu var. Biri Redux yapısı ;

İlk olarak Addblog componentimde datamı oluşturur doc olarak firestore me kaydedirim. Ardından ckEditor componentimde de Update yapabilirim.

İkinci yöntem en best practise olanı ve benim bu blogta uygulayacam. ckEditor diye ayrı bir component oluşturma Addblog componentimin içinde oluştur ve kullan.

Üçüncü yol ise Redux kullanarak çözülecek. Böyle gerçek bir problem üzerinde olduğu için burada işliyorum ve nasıl yapılacağı hakkında bilgi vereceğim yazmayacağım. Add blogda her onChange için action yazılır ve bu actionların tetiklemisyle blogReducera state bilgileri payload aracılığı ile aktarılır. ckEditor componentindede aynı sistem uygulanır. Submit methoduna ise yeni bir action yazılır ve firestore ' a doc olarak state eklenir.

İkinci yöntem kodları:

Addblog componentime kodlarımı ekledim. Bu işlemleri yaptıysanız sonuç başarılı olacaktır ama Ck editor kullanarak eklediğiniz içerikler display edildiğinde html tagları ile beraber gösterilcek. Bu sorun için ckeditor ile database set edilmiş dataları gösterme :

şeklinde bir html attiribute tanımlasınız ve attiribute nin içine içeriğiniz koymanız gerekmektedir.