CKEDITOR FORGE EKLENTISI KULLANIMI

Web uygulamalarında uzun metinler doldurmamız gerektiğinde genellikle textarea özelliğini kullanırız. Ama blog, haber, içerik paylaşımı gibi yazının içerini düzenlememizi gerektiren sistemlerde textarea özelliği her zaman işimizi görmez. Bu gibi durumlarda sistemimize metin düzenleyici eklememiz gerekebilir. Bunu kendimizde tasarlayabiliriz fakat hali hazırda kullanabileceğimiz metin düzenleyicilerde bulunmaktadır. Kullanabileceğimiz metin düzenleyici eklentilerinden birisi de CKEditor. CKEditor açık kaynak kodlu, web sitesi üzerine gömülen WYSIWYG zengin metin düzenleyicisidir. Microsoft Word, OpenOffice gibi masaüstü düzenleme uygulamalarında kullandığımız bazı özellikleri web sitesi üzerinde kullanmamıza olanak sağlar.

Projemize dahil edebilmek için Forge üzerisinden CKEditor eklentisini indirmemiz gerekiyor. CKEditor ve CKEditor.Reactive ve CKEditor.Reactive_V2 olarak traditional ve reactive üzerinde çalışan 3 farklı eklenti görebilirsiniz. Bu örnekde Reactive üzerisinden gerçekleştireceğiz. Bunun için CKeditor.Reactive in hataları düzeltilmiş versiyonu olan CKEditor.Reactive_V2 eklentisini açıyoruz ve install seçeneği ile environment’ımıza dahil ediyoruz.

CKEditor eklentisini eklemek istediğimiz projeyi açıyoruz ve eklentiyi projeye dahil etmek için Manage Dependencies sekmesini açıyoruz.

Açılan sekmeden CKEditorReactive_V2 eklentisini projemize dahil ediyoruz.

Eğer CKEditor’ü kullanmak istediğimiz bölümde textarea form elementini kullanıyor isek bunu input ile değiştirebilirsiniz. Textarea kullanımında değerin gelmemesi gibi sonuçlarla karşılaşabilirsiniz.

Form elementimizi input olarak değiştirdikten sonra Interface altındaki Elements sekmesinden CKEditorReactive_V2 içerisindeki CKEditor_Reactive_V2 block’unu CKEditor’e çevirmek istediğimiz inputun altına ekliyoruz.

CKEditor_Reactive_V2 block’u InputId’si girmenizi isteyecektir, boş olması durumunda hata mesajı göreceksiniz. InputId kısmına inputunuzun Idsini giriniz. Diğer kısımları doldurmanız zorunlu değil fakat  bilgi vermek gerekir ise Language inputu CKEditörün hangi dilde gözükeceğini belirler. Dilin kısa yazılışını string olarak buraya yazabilirsiniz. (Örnek: “tr”, “en”, “de”). Link target type tıklanılan linkin nasıl açılacağını belirler. Buraya “_blank, _self, _parent, _top veya iframe ismi” olacak şekilde doldurabilirsiniz.  CSSHeight bölümüne CKEditörün sayfa içerisinde gözükmesini istediğiniz yüksekliği girebilirsiniz, bu yükseklik CSSde kullanılabilir şekilde girilmelidir. Örnek: “300px”.

Config kısmı ise CKEditör ile ilgili bazı ayaları yapmamıza yardımcı olur. İşimize yaramayan özellikleri kaldırabiliriz veya yerlerini değiştirebiliriz. Bu config için CKEditör dökümanını inceleyebilirsiniz veya

https://ckeditor.com/latest/samples/toolbarconfigurator/index.html

Adresine giderek CKEditörün sağladığı toolbar configurator aracını kullabilirsiniz.

Websitesi üzerinden ayarlamalarınızı yaptıktan sonra Get toolbar config butonuna bastığınız zaman sizin için bir config kodu oluşturacaktır. Burada function altındaki kısımlarının bulunduğu yeri koplayıp config içerisine yapıştıracağız. Fakat bu kodu biraz düzenlememiz ve JSON haline çevirmemiz gerekiyor.

“config.toolbarGroups =”’u “toolbarGroups :” olarak değiştiriyoruz ve ]; olan kısımda noktalı virgül yerine , koyuyoruz. “config.removeButtons =”’uda değiştirerek “removeButtons :” yapmamız gerekiyor. Aynı şekilde sonunda bulunan noktalı virgülü, devamında bir şey var ise virgül ile değiştiriyoruz, eğer yok ise kaldırmanız gerekiyor.  Başka ayarlar var ise bunları da aynı şekilde JSON formatına uygun olacak şekilde düzenliyoruz.

Config Örneği

Tüm işleri tamamladıktan sonra uygulamayı yayınladığınız zaman CKEditörü görebiliyor olmanız gerekiyor. Fakat eğer inputa ait bir value var ise içerisinde herhangi bir değer göremeyeceksiniz.

Bu sorunu düzeltebilmek için 2 işlem yapmamız gerekiyor. Öncelikle verimizi aggregate’den alıyor isek bir On After Fetch client actionı oluşturuyoruz.

Flow içerisine client action ekliyoruz ve CKEditorReactive_V2 altındaki SetEditorData client actionını seçiyoruz.

Bizden istediği inputlara Input Idsi ve CKEditorün içerisine yazdırmak istediğimiz veriyi HTML inputuna giriyoruz.

Bu işlemi tamamladıktan sonra verimizin dolu olarak gelmesi gerekior fakat gösterme işlemi dışında veriyi kayıt edebilmek içinde CKEditör içeresindeki verileri HTML olarak alıp değişkenimize tanımlamamız etmemiz gerekiyor.Bunun için kayıt işlemini yaptığımız Client Action’a geliyoruz ve CKEditorReactive_V2 altında ki GetDataFromEditor Client actionını flowumuza ekliyoruz. Bizden girmemizi beklediği input idsini dolduruyoruz.

Client Action arkasına Assign blocku ekliyoruz ve kaydetmek istediğimiz değişkeni Client Action’dan dönen HTML verisine eşitliyoruz.

Tüm işlemleri tamamlayıp publish ettikden sonra her şeyin düzgünce çalışıyor olması gerekiyor.

Son olarak CKEditör içeriğini bir sayfada göstermek istediğiniz zaman Outsystem’in HTML içeriği string olarak yazdırdığını göreceksiniz.

Bunu düzeltebilmek için Expressionı kaldırıp Container ekliyoruz ve Container’a isim vermemiz gerekiyor. Daha sonra eğer veriyi aggregateden alıyor isek On After Fetch Client Action’ı tanımlıyoruz. Flow’a eklentinin bize verdiği setContainerHTML actionını ekliyoruz.

Action içerisinde bizden doldurmamızı beklediği kısımlara HTML içeriğini aldığımız veriyi ve Oluşturduğumuz Container Id sini giriyoruz.

Tüm bu işlemleri tamamdaıktan sonra her şeyin düzgünce çalıştığından emin olmak için kodumuzu publishliyoruz ve testlerimizi yapıyoruz.