CKEditor Kod Renklendirme Eklentisi - Highlight Plugin

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.

Bu yazı en son 03 Aralık 2011 tarihinde düzenlenmiştir ve güncelliğini yitirmiş olabilir.
Benzer Yazılar

blog comments powered by Disqus

© Mustafa Navruz 2011 0.0388 sn.

^ Başa Dön