CKEditor Kod Renklendirme Eklentisi - Highlight Plugin

CKEditor (Eski adıyla FCKEditor) kişisel kullanım için ücretsiz olarak dağıtılan, sitemizin yönetim panelinde de kullandığım bir WYSIWYG editör.

Siteyi kodlarken CKEditor için ekleyeceğim kodları renklendirebileceğim bir eklenti bulamadığımdan bunun için bir eklenti yazmıştım. Pek kullanışlı değil, ama belki birisinin işine yarar düşüncesiyle yayınlıyorum. Yaptığı iş oldukça basit. Panele eklenen bir buton vasıtasıyla açılan bir pencereye eklemek istediğiniz kodu yapıştırıp hangi dil olduğunu seçiyorsunuz. Ve kodunuzu aşağıdaki şekilde yazı alanına ekliyor.

<pre><code class="html">Kod</code></pre>

Aslında eklenti sadece kodlarınızı uygun formatta eklemenize yarıyor, kodu otomatik renklendirmiyor. Bu işlem için GeSHi, SyntaxHighlighter gibi ayrı bir uygulama kullanmanız gerekiyor. Ben Ivan Sagalaev'in yazdığı highlight.js kütüphanesini kullanıyorum.

Kullanımı:

• İndirdiğiniz dosyadaki highlight klasörünü ckeditor/plugins klasörüne kopyalayın.
• Etkinleştirmek için CKEditor config bölümüne

  config.extraPlugins='highlight';

  satırını ekleyin.
• Eklenti butonunun gözükmesi için kendi toolbarınızı oluşturarak highlight kodunu ekleyin. Örnek toolbar (2. satırda görebilirsiniz.)
  

  config.toolbar_TOOLBAR = [
      ['Source','Preview', 'highlight'],
      ['Cut','Copy','Paste','PasteText','PasteFromWord'],
      ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
      ['Maximize', 'ShowBlocks','-','About'],
      ['Image','Table','HorizontalRule','SpecialChar'],
      ['Link','Unlink','Anchor'],
      '/',
      ['Styles','Format','Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
      ['TextColor','BGColor'],
      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
      ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
      ];

• Değişikliği görmek için tarayıcıyı yenileyin. CKEditor config dosyasını önbellekten çağırabiliyor. Bu durumda önbelleği temizleyerek sayfayı yeniden yüklemek için CTRL+F5 tuş kombinasyonunu kullanın.

Highlight Plugin'ini indirin.