CKEditor Code Snippet Kurulumu ve Kullanımı

Bu yazımda CKEditor code snippet kurulumu ve kullanımı, tema seçimi gibi konulardan ayrıntılı olarak bahsedeceğim. Ayrıca CKEditor kurulumu ve kullanımı adlı yazıma girerek daha ayrıntılı bilgilere ulaşabilirsiniz.

Özellikle kod ile uğraşan kişiler, web üzerinde yazdıkları kodları paylaşma gereği hissetmektedirler. Bu kodları düz yazı olarak değil de renkli bir şekilde ve daha anlaşılır halde paylaşmak istenir. Kodları renkli halde paylaşmak için code snippet (kod renklendirme) adlı uygulamaları kullanabiliriz. CKEditor code snippet eklentisi ile bu gerekliliği, çeşitli tema seçenekleriyle CKEditor uygulaması üzerinde kolayca ve güzelce halledeceğiz. Çoğu proğramlama dili kod yapısını desteklemektedir.

İlk olarak CKEditor indirme sayfasına girelim, CKEditor’u indirelim ve zip dosyasından çıkartalım. Daha sonra CKEditor code snippet eklentisi sayfasına giriş yapalım, eklentiyi indirelim ve zip dosyasından ckeditor > plugins klasörü içerisine çıkartalım. Şimdi eklentiyi CKEditor uygulamasına dahil etmek için ckeditor > config.js dosyasını açıp aşağıdaki kodu yazalım.

CKEDITOR.editorConfig = function( config ) {
	config.codeSnippet_theme = 'default';
	config.extraPlugins = 'codesnippet';
};

Yukarıdaki kod ile CKEditor
içerisinde codesnippet kodlarının görüneceği tema seçimini de
yapmış oluyoruz. Bu tema seçimi sadece CKEditor uygulaması
üzerinde geçerlidir. Yazıları ve kodları yayınladığımız
sayfa için geçerli değildir.

Şimdi örnek bir sayfa oluşturalım ve aşağıdaki kodlar ile CKEditor uygulamasını projemize dahil edelim. Aşağıdaki satır sadece edötörü kullanacağınız sayfada ekli olmalı. Kodları renkli göstereceğiniz içerik sayfasında bu satırı eklemenize gerek yok.

Ardından CKEditor code snippet eklentisi dahil etme işlemi için gerekli olan css ve js dosyalarını ve aynı zamanda codesnippet eklentisini aktif etmek için gerekli js kodunu ekliyoruz. Yani aşağıdaki satırlarla o sayfada codesnippet eklentisini aktif etmiş oluyoruz. Bu yüzden editörde de, hazırladığınız içeriğin yayınlandığı sayfada da aktif olmasını istiyorsanız her iki sayfada da aşağıdaki satırlar eklenmiş olmalı.

‘ckeditor/plugins/codesnippet/lib/highlight/styles/’ Bu dizinde eklediğiniz kodların renklerini ayarlayabileceğimiz CKEditor code snippet tema seçimi için css dosyaları mevcut. Mesela yukarıda css çağırma işleminde monokai.css kısmına ‘default.css’ yazar isek kodlarımız projemizde farklı renklerde gözükecek.

Artık bir textarea üzerine CKEditor uygulamamızı yerleştirip, editörü kullanmaya kullanmaya başlayabiliriz.

Ayrıca CKEditor üzerinde code snippet eklentisini kullanırken PHP tarafında htmlspecialchars fonksiyonu ile veriyi CKEditor içerisine eklememiz gerekiyor. Yoksa veritabanından getirilen verileri CKEditor üzerinden göstermek isterken kodların istediğimiz gibi görünmemesi problemiyle karşı karşıya kalabiliriz.

<?php echo htmlspecialchars('Veri'); ?>

Anlatacaklarım bu kadar. CKEditor code snippet eklentisi kurulumu hazır halini CKEditorCodeSnippet.rar adlı dosyayı indirerek ulaşabilirsiniz.