Birden Fazla CKEditor Ekleme: Kapsamlı Bir Kılavuz
CKEditor, web uygulamalarında zengin metin düzenleme özellikleri sağlayan popüler bir açık kaynaklı WYSIWYG (Ne Görüyorsanız Onu Alırsınız) editörüdür. Birden fazla CKEditor örneği eklemek, kullanıcıların aynı anda birden fazla metin alanını düzenlemelerine olanak tanıyarak web uygulamalarının işlevselliğini artırabilir.
Bu makale, bir web uygulamasına birden fazla CKEditor örneği ekleme konusunda adım adım bir kılavuz sağlayacaktır. Ayrıca, ilgili kaynaklara ve faydalı dosyalara bağlantılar da içerecektir.
Adım 1: CKEditor’ı Kurma
İlk adım, CKEditor’ı web uygulamanıza kurmaktır. Bunu, aşağıdaki komutu kullanarak npm aracılığıyla yapabilirsiniz:
npm install --save ckeditor4
Kurulum tamamlandıktan sonra CKEditor dosyalarını node_modules/ckeditor4/ckeditor dizininde bulabilirsiniz.
Adım 2: CKEditor Örnekleri Oluşturma
Birden fazla CKEditor örneği oluşturmak için CKEDITOR.replace() yöntemini kullanabilirsiniz. Bu yöntem, düzenlenecek metin alanının kimliğini ve CKEditor yapılandırma seçeneklerini alır.
Örneğin, aşağıdaki kod iki CKEditor örneği oluşturur:
CKEDITOR.replace('editor1');
CKEDITOR.replace('editor2');
Adım 3: Yapılandırma Seçenekleri
CKEditor, çeşitli yapılandırma seçenekleri sunar. Bu seçenekler, editörün görünümünü, işlevselliğini ve davranışını özelleştirmenize olanak tanır.
Örneğin, aşağıdaki kod editörün yüksekliğini 300 piksele ayarlar:
CKEDITOR.replace('editor1', {
height: 300
});
Adım 4: Olay İşleyicileri
CKEditor, düzenleme işlemiyle ilgili çeşitli olaylar tetikler. Bu olayları dinleyerek ve olay işleyicileri tanımlayarak, editörün davranışını özelleştirebilirsiniz.
Örneğin, aşağıdaki kod editörün içeriğinin değiştiğinde bir olay işleyicisi tanımlar:
CKEDITOR.on('instanceReady', function(evt) {
evt.editor.on('change', function() {
console.log('İçerik değiştirildi!');
});
});
İlgili Kaynaklar
Faydalı Dosyalar
Sonuç
Birden fazla CKEditor örneği eklemek, web uygulamalarının işlevselliğini artırabilir ve kullanıcıların aynı anda birden fazla metin alanını düzenlemelerine olanak tanır. Bu kılavuzu izleyerek, web uygulamanıza kolayca birden fazla CKEditor örneği ekleyebilir ve yapılandırma seçeneklerini ve olay işleyicilerini kullanarak editörün davranışını özelleştirebilirsiniz.