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

CKEditor'e html içerik ekleme

Merhaba arkadaşlar bu yazı veritabanından almış olduğunuz html içeriği tırnak işaretleri, boşluklar, html etiketleri vs. gibi javascript hatalarına sebep olabilecek şeyler kurtararak ckeditor'e nasıl ekleneceğini gösteren bir örnektir.

Ben bir Asp.NET MVC uygulamasında bu örneği kullanmıştım. Tabi ufak bir iki değişiklikle normal asp.net projelerinde de kullanabilirsiniz.

** Öncelikle Controller'da veritabanından html içeriği getirecek metodu tanımlıyoruz. Bu görüldüğü gibi geri dönüş değeri olarak Json nesnesi dönüyor.

public ActionResult GetPageContent(PageViewModel pageViewModel)
{
      pageViewModel.PageDTO = PageBusiness.GetByGUID(pageViewModel.PageDTO.GUID);
      return Json(new { content = pageViewModel.PageContentAsText });
}

** JQuery ajax ile de bu metodu çağırıp dönen sonucu ckeditor'e ekliyoruz. 

function SetCKEditorContent(pageGUID)
{
      data = {};
      data["PageDTO.GUID"] = pageGUID;
      $.ajax({
              url: '@Url.Action("GetPageContent")',
              type: "POST",
              processData: true,
              data: data,
              dataType: "json",
              async: true,
              success: function (data) {
                    editor.setData(data.content, function () { this.checkDirty(); });  
                    // Ajax sonucunda gelen data nesnesindeki değeri CKEditor'e atama işlemi.
                }
            });
}

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

CKEditor'de imlecin olduğu yere yeni bir metin eklemek

CKeditor'de kullanıcının seçtiği noktaya yeni bir metin/içerik eklemek istiyorsanız aşağıda kullandığım örneği uygulayabilirsiniz; (Örneğin ben "facebook comments" eklentisi için kullanmıştım)

Öncelikle ckeditor'ün oluşturulma aşamasında editor değişkeni ile ckeditör'ü ilişkilendiriyoruz. 


var editor;
CKEDITOR.on('instanceReady', function (ev) {
    editor = ev.editor;
});


Sonrasında ckeditor'e yeni bir metin eklemek için böyle bir metot kullanabilirsiniz. Tabi farklı içerikler için kullacaksanız geliştirip "icerik"i metoda parametre olarak da alabilirsiniz.

function YeniIcerikEkle()
{
  var icerik = '<div> ckeditor'e içerik ekleme örneği </div>';
  var yeniAlan = CKEDITOR.dom.element.createFromHtml(icerik, editor.document);
  editor.insertElement(yeniAlan);
}