Bir blog sitesi açtınız, yazılarınıza renkli kod parçacıkları eklemek istiyorsunuz. Bunu CKEditor code snippet ile yapmanız mümkündür.
İlk adım 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';
};
Şimdi ise CKEditorü projemize dahil edelim.
<script src="ckeditor/ckeditor.js"></script>
Kodların renklendirileceği sayfalarda ckeditor.js'i dahil etmenize gerek yok. Şimdi ise kodlarımızı renklendirecek Code Snippet dosylarını projemize dahil edelim.
<link rel="stylesheet" href="ckeditor/plugins/codesnippet/lib/highlight/styles/monokai.css" />
<script src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js" type="text/javascript"></script>
<script>hljs.initHighlightingOnLoad();</script>
Bu üç satırı kodlarımızı renklendireceğimiz sayfalara dahil etmemiz gerekiyor. Şimdi ise bir textarea üzerinde CKEditor uygulamamızı kullanmaya başlayabilriz.
<textarea class="ckeditor" id="editor1"></textarea>
Eğer CKEdötoru PHP tarafında kullanacaksanız, güncelleme yapacağınız sayfada eklemiş olduğunuz veriyi güncelleme sayfasına htmlspecialchars() içinde yazdırmanız gereklidir, aksi takdirde HTML olarak eklediğiniz herhangi bir form elemanı arayüz de kod olarak okunacaktır. Eğer Code Snippet pluginini Codeigniter de kullanıyorsanız config.php dosyanızın içinde ki $config['global_xss_filtering'] = FALSE; bu kısım FALSE olmalıdır
<textarea class="ckeditor" id="editor1"><?php echo htmlspecialchars($haber->aciklamasi); ?></textarea>
CKEditor Code Snippet eklentisinin tam çalışır halini indirebilirsiniz.
Yorumlar (0)