CKEditor codemirror eklentisi nedir, ne işe yarar ve CKEditor içerisine kurulumu nasıl yapılır ve tema seçimi konularından bahsedeceğim. Ayrıca CKEditor kurulumu ve kullanımı adlı yazıma girerek daha ayrıntılı bilgilere ulaşabilirsiniz.
CKEditor üzerinde oluşturduğumuz içerikleri, araçlar kısmında Kaynak butonuna tıkladığımızda açılan bölümde kod biçiminde görmüş oluyoruz. Bu kodları normal yazı halinde görmek yerine renkli ve daha anlaşılır bir biçimde görmek isteyebiliriz. Bu isteğimizi gerçekleştirmek için CKEditor codemirror eklentisini kurmamız gerekiyor. CKEditor codemirror eklentisi ile kaynak kodlarımızı renklendirebiliriz. Ayrıca tema seçimi yapabilir, görüntü özelliğini değiştirebiliriz.
CKEditor indirme sayfasına giriş yapalım ve zip halinde CKEditor dosyasını indirip, projemizin ana dizinine çıkartalım. Daha sonra CKEditor codemirror eklentisi indirme sayfasına giriş yapalım ve zip uzantılı dosyayı indirelim. İndirdiğimiz eklentiyi zip dosyasından ckeditor > plugins klasörü içerisine çıkartalım. Sonrasında ckeditor > config.js dosyasını açalım ve aşağıdaki kodları ekleyelim.
CKEDITOR.editorConfig = function( config ) {
config.codemirror_theme = 'abcdef';
config.extraPlugins = 'codemirror';
};Böylece codemirror eklentisini CKEditor içerisine ekleme işlemini gerçekleştirdik. Yukarıdaki kod ile ayrıca CKEditor codemirror tema değiştirme işlemini de yapmış oluyoruz. Bu sayfa üzerinden codemirror tema seçimi sonrası kaynak kodlarının nasıl görüneceğini görebilirsiniz. ‘ckeditorpluginscodemirrortheme’ içerisinde codemirror tema css dosyaları bulunmakta.
Not: CKEditor üzerinde kaynak kısmına girdiğinizde codemirror eklentisinin çalıştığını ama boşluklarda ve imleçte tuhaf bir şekilde ‘Â’ harfi sorunu oluşuyor ise CKEditor Builder sayfası üzerinden codemirror eklentisini CKEditor’e ekleyin ve hazır bir şekilde indirin.
CKEditor kurulumu ve codemirror eklentisini entegre etme işlemini gerçekleştirdik. Artık CKEditor’u sayfaya nasıl entegre ederiz konusuna bakalım.
Örnek bir html dosyası oluşturalım ve aşağıdaki kodları head etiketine yada body etiketinin en aşağısına ekleyelim.
CKEditor’u