CKEditor Kullanımı – Ayarlar

Merhabalar uzun aradan sonra kpss maratonunu atlatım bilgisayarıma kavuştum ve önceden yazmayı planladığım bu yazımı yazmaya vakit ayırabildim. CKEditor ü sayfamıza nasıl  ekleyeceğimizi önceki  yazımda göstermiştim.

Bu yazıda da CKEditor ün bazı  özelliklerinin  nasıl belirleneceğini, değiştirileceğini anlatacağım.CKEditor ayarlarını iki basit yöntemle yapabiliriz: Birincisi CKEditor ü eklediğimiz sayfa üzerinde tanımlamalar yaparak , ikincisi CKEditor config dosyasında tanımlamalar yaparak.

Sayfa üzerinde tanımlamalar yaparak:

<!DOCTYPE html>
<html>
    <head>
        <title>CKEditor Örnek</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--Ckedtor ana dosyasını  ekleyelim-->
        <script src="ckeditor/ckeditor.js"></script><!--ckeditor dosyaları  bu  dosya ile aynı  dizinde-->
    </head>
    <body>
        <form method="post" action="">
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                Gelişmiş elemanları bulunan metin alanı
            </textarea>
            <input type="submit" value="Kaydet">
        </form>
        <script>
            CKEDITOR.replace( 'editor1',{
          language: 'tr', //CKEDITOR arayüz dili
          uiColor: '#9AB8F3',// CKEDITOR arayüz rengi
          colorButton_colors : '000000,FF0000,00FF00,0000FF',//yazı renk butonunun renkleri
          colorButton_enableMore : false, //belirtilenler dışında renk  seçimini  engelleme
          contentsLanguage : 'tr'//Editör içeriği oluşturmak için kullanılan yazı dilinin dil kodu.
        });
        </script>
    </body>
</html>

CKEditor replace fonksiyonunun ikinci  parametresine uygulanmasını  istediğimiz  özellikleri tanımlayabiliyoruz.Temel bir kaç  ayarı üstte gösterdim tüm ayarları CKEditor dökümantasyonunda bulabilirsiniz.

ckeditor3

CKEditor config dosyası ile ayarları belirlemek:

Ayar dosyası ckeditor klasörünün içindeki config.js dosyasıdır.Bu dosya ile ayarlama yapmak için dosyada hazır bulunan editorconfig fonksiyonunu kullanacağız. Üste yaptığımız ayarların aynısını bu dosya üzerinden şu şekilde yapabiliriz:

/**
* @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config ) {
config.language = 'tr'; //CKEDITOR arayüz dili
config.uiColor = '#9AB8F3';// CKEDITOR arayüz rengi
config.colorButton_colors = '000000,FF0000,00FF00,0000FF';//yazı renk butonunun renkleri
config.colorButton_enableMore = false; //belirtilenler dışında renk  seçimini  engelleme
config.contentsLanguage = 'tr';//Editör içeriği oluşturmak için kullanılan yazı dilinin dil kodu.
};

Bu şekilde yapılan ayarlama ile kullandığınız tüm editorler bu ayarlara sahip olacak.Sayfa içinde yaptığımız ayarlar ise sadece o editor için geçerli olur.

Sonraki  yazıda CKEditor de bulunan butonların düzenlenmesinden bahsedeceğim.Sonraki  yazıda görüşmek üzere.

CKEditor dökümantasyonu

 

 

Samet ATABAŞ

Giresun Üniversitesi Öğretim Görevlisi

CKEditor Kullanımı – Ayarlar” için bir yorum

  • Mart 7, 2020 tarihinde, saat 22:16
    Permalink

    Ckeditor html taglarının tamamını kapatarak kullanmak istiyorum bunu nasıl yapabilirim acaba???

    Yanıtla

Bir Yorum Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.