CKEditor html içeriği için özel css atama

Bu aralar CKEditor başkıma bela olduğu için genel de bununla ilgili gördüğüm püf noktaları yazıyorum :). Bu yazıda CKEditor içeriği için bir veya daha fazla css dosyası nasıl kullanacağınızı örneklendiricem. Yapmak istediğimizi hızlıca ifade etmesi için aşağıdaki resme bakabilirsiniz.

Siz değiştirmediğiniz sürece CKEditor html'e ait varsayılan css dosyası 'ckeditor/content.css' dosyasıdır. Fakat resme dikkat ederseniz CKEditor için 'Content/reset.css' ve 'Content/websiteContent.css' dosyaları kullanılması sağlanmıştır.

Öncelikle tek bir css dosyası atama işlemini gösterelim. CKEditor klasörünüzde bulunan config.js dosyasını açarsanız aşağıdaki gibi bir kod bloku göreceksiniz. İşaretlediğim satırı bu dosyanıza eklerseniz varsayılan css dosyasını değiştirecektir.

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';

      config.contentsCss = 'Content/websiteContent.css';
};
Eğer birden fazla css dosyası kullanmak istiyorsanız contentCss özelliğine atamak için bir dizi tanımlamanız gerekmektedir.

CKEDITOR.editorConfig = function (config) {
     var cssArray = new Array(2);
     cssArray[0] = 'Content/reset.css';
     cssArray[1] = 'Content/websiteContent.css';
     config.contentsCss = cssArray;
};
Tabi bu yapacaklarınız sabit bir tanımlama şeklidir. Şöyle ki programatik olarak farklı durumlara göre contentCss için farklı stil dosyaları yüklemek istiyorsanız aşağıdaki örneği kullanabilirsiniz.

function changeCKEditorContentCSS(contentCssURL)
{
     var cssArray = new Array(2);
     cssArray[0] = 'Content/reset.css';
     cssArray[1] = contentCssURL;
     editor.config.contentsCss = cssArray;
//Opsiyonel isterseniz en başta tanımladığım gibi tek bir css dosyası da tanımlayabilirsiniz.
}
Not: CKEditor için editor nesnesini nasıl oluşturduğumu görmek için ckeditor ile ilgili bir önceki yazımı inceleyebilirsiniz;
http://turkceyazilim.blogspot.com/2013/03/ckeditorde-imlecin-oldugu-yere-yeni-bir.html