Ckeditor Codesnippet Plugin Eklentisi ile Kod Renklendirme-Ramazan Belyurt

Ckeditor Codesnippet Plugin Eklentisi ile Kod Renklendirme

14.02.2016 Yazar:Ramazan Belyurt Okunma:3139

Ckeditor web sayfalarına makale eklerken kullandığımız textarea editörüdür. Ofice programlarına benzer bir yapıya sahiptir. Yazılarımızı düzenlemek için bize bir çok araç sunar. Ckeditörün bir çok plugini(eklenti) vardır. Ckeditör ile bazı işlemleri yapabilmek için bize bir çok eklenti sunar.

Codesnippet eklentisi blogunda kod paylaşımı yapacaklar için kod renklendirmesi yapan bir eklentidir. Kod renklendirmesi için bir çok programlama dilini desteklemektedir(php,c#,css,html vb). Bu eklentiyi Ckeditore sonradan eklemek istediğimizde bazı sorunlar çıkmaktadır. Sorun yaşamadan bu eklentiyi Ckedtore eklemek için sitesinden Codesnippet eklentisi eklenmiş halini indrmemiz daha mantıklı olacaktır. Sadece Codesnippet eklentisi değil istediğimiz bir çok eklentiyi ekleyerek indirebiliriz.

Ckeditorü istediğimiz eklentiler ile birlikte indirmek için ckeditor.com/builder adresine gitmemiz gerekir.

Yukarıdaki resimde öncelikle Ckeditorün hangi sürümünü indireceğimizi seçiyoruz.

Yukarıdaki resimde de sağ tarafta bulunan plugin listesinden istediğimiz plugini seçerek sol tarafa ekliyoruz.Biz Codesnippet plugini anlattığımız için onu seçiyoruz ve sol tarafa ekliyoruz.

Daha sonra sırayla Ckeditor temamızı, istediğimiz dilleri seçtikten sonra download ediyoruz.

Ckeditoru indirdikten sonra zipten çıkarıyoruz ve web projemizin kök dizinine kopyalıyoruz. Daha sonra aşağıdaki kodu Ckeditorü ekleyeceğimiz sayfanın head tagları arasına yapıştırıyoruz.Ckeditorün dosya yolunu projemize göre değiştiriyoruz.

<head>

<script src="ckeditor/ckeditor.js" type="text/javascript"></script>

</head>

Form yapımızda Ckeditörümüzü eklemek istediğimiz Textarea kontroüne <textarea class="ckeditor"></textarea> şeklinde ekleyerek aktifleştiriyoruz. Aktifleştirdiğimiz zaman Ckeditorun araçlar panelinde simgesi görünecektir. Yazımıza kod ekleyeceğimiz zaman bu simgeye tıklayarak hangi kodu yazıyorsak onu seçerek kodlarımızı yazıyoruz.Daha sonra kodları göstereceğimiz sayfanın head tagları arasına aşağıdaki kodları ekliyoruz.

<head>

<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>

</head>

Etiketler: wampserver php yazılışı ckeditor codesnippet id sıfırlama

WampServer Kurulumu

İlhan Albayrak

Çok faydalı bir paylaşım; teşekkürler, emeğinize sağlık.

Muhammed Yaman

ilk eklenilen ckeditore sonradan codesnippet eklemesi flan ben yapamadıydım,çok teşekkürler güzel paylaşım :) bu arada <textarea class="ckeditor" id="editor1"></textarea> bu şekilde eklenirse çalışıyor ;)

Yaşar yılmaz

Ben bunu ekliyorum fakat kodlar tam ortalı olarak gorunuyor nasıl hizalayabilirim ayrıca kodlar kopyaladığım düzen ile aynı gelmıyor