CKEditor yapılandırma örneği

CKEditor’ü projeye eklerken araç çubuğu, dil, basePath ve mevcut editör örneğini temizleme gibi ayarlara dikkat eden açıklamalı örnek.

CKEditor'ü sayfaya eklemek kolaydır; asıl iş onu projeye göre yapılandırmaktır: hangi araçlar görünsün, dil ne olsun, kullanıcı düzenleyiciyi yeniden boyutlandırabilsin mi, yüklenen görseller nereye gitsin. Aşağıda çalışan bir yapılandırma örneği var.

Örnekteki önemli noktalar

Aynı alan üzerine ikinci kez düzenleyici kurmadan önce mevcut örneğin yok edilmesi gerekir; aksi halde sessizce çakışır ve alan hiç açılmaz. Sayfa parçasını AJAX ile yenileyen ekranlarda en sık karşılaşılan hata budur.
Temel yol (basePath) doğru verilmezse düzenleyici kendi dosyalarını bulamaz; konsolda 404 hataları görürsünüz.
Araç çubuğu dizi olarak tanımlanır; ihtiyaç duymadığınız düğmeleri çıkarmak hem arayüzü sadeleştirir hem de kullanıcının bozuk biçimlendirme yapıştırmasını azaltır.

Yapılandırmayı sayfaya gömmek yerine ayrı bir dosyada tutmak, aynı ayarları birden çok ekranda kullanmanızı kolaylaştırır.

Html

Javascript

var editor = CKEDITOR.instances["ck_container"];

if (editor) { editor.destroy(); }

//CKeditor'ün bulunduğu dizinin yolu.

CKEDITOR.config.basePath = "/ckeditor";

CKEDITOR.language = 'tr';

CKEDITOR.config.resize_enabled = false;

CKEDITOR.config.toolbar =

[

    ['Maximize', '-', 'Source', '-', 'Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo', '-', 'Find', 'Replace', '-', 'Link', 'Unlink', '-', 'CreateDiv', 'Image', 'Table', 'HorizontalRule', '-', 'SpecialChar'],

    '/',

    ['FontSize', 'Bold', 'Italic', 'Underline', 'Strike', '-', 'TextColor', 'BGColor', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'Outdent', 'Indent', '-', 'Subscript', 'Superscript', '-', 'NumberedList', 'BulletedList'],

    ['RemoveFormat']

];

CKEDITOR.config.docType = "

";

CKEDITOR.config.on = {

                        instanceReady: function (e) {

                                                        //Editör yüksekliğinin ayarlanması

                                                        e.editor.resize("100%", 500);

                                                        e.editor.dataProcessor.writer.selfClosingEnd = ' />';

                                                    }

                    };

CKEDITOR.dtd.$removeEmpty['i'] = false;

CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;

CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_BR;

CKEDITOR.config.autoParagraph = false;

CKEDITOR.config.ignoreEmptyParagraph = false;

CKEDITOR.config.fillEmptyBlocks = false;

CKEDITOR.config.tabSpaces = 4;

CKEDITOR.config.allowedContent = true;

CKEDITOR.config.autoUpdateElement = false;

CKEDITOR.config.entities = false;

CKEDITOR.config.extraPlugins = "uploadimage";

//Editörün üzerine dosya sürüklendiğinde, o dosyanın post edileceği link

CKEDITOR.config.uploadUrl = "/ckeditor-upload";

/*

CKeditor, üzerine sürüklenerek yüklenen dosyaların gösterilmesi için bir kütüphane hazırlamıştır.

Biz bu örnekte daha önce yüklenen dosyaların gösterileceği bir sayfanın CKeditöre nasıl tanımlanacağını örnek olarak vermek istedik.

*/

//Editöre sürüklenerek yüklenen dosyaları göstermek için hazırladığınız sayfanın linki

CKEDITOR.config.filebrowserBrowseUrl = "/ckeditor-browse";

//Editöre sürüklenerek yüklenen dosyaları göstermek için açılacak pencerenin genişliği

CKEDITOR.config.filebrowserWindowWidth = "1052";

//Editöre sürüklenerek yüklenen dosyaları göstermek için açılacak pencerenin yüksekliği

CKEDITOR.config.filebrowserWindowHeight = "789";



editor = CKEDITOR.replace("ck_container", CKEDITOR.config);

Kısa rehber

Ne zaman kullanılır?

CKEditor yapılandırması; haber, blog, ürün açıklaması, sözleşme ve yardım metni girilen yönetim panellerinde kullanılır. Editörün sade ve kontrollü kalması, içerik kalitesini doğrudan etkiler.

Dikkat edilecekler

Kullanıcıya gerçekten ihtiyaç duyduğu araçları gösterin; gereksiz butonlar bozuk HTML riskini artırır.
Görsel yükleme yolu, dosya izinleri ve güvenlik filtresini birlikte planlayın.
Aynı sayfada editörü tekrar başlatmadan önce eski instance'ı temizleyin.

Sık yapılan hata

Editörü varsayılan haliyle bırakmak genellikle fazla özgürlük verir. Sonradan temizlenmesi zor, tutarsız ve ağır HTML çıktıları oluşabilir.

Bu örnek nerede işe yarar?

Bu tür küçük yardımcı kodlar web yazılımı, mobil uygulama arka uçları, yönetim panelleri ve API projelerinde zaman kazandırır. Önemli olan örneği olduğu gibi kopyalamak değil, veri formatı, güvenlik ve performans beklentisine göre projeye uyarlamaktır.