metin editörü Archives - Gençbilişim.net

CKEditor Kullanımı – Toolbar Düzenlemesi

Temmuz 16, 2014Nisan 7, 2015 Samet ATABAŞ 0 yorum ckeditor, editor, metin, metin editörü, richtext, toolbar

CKEditor ün bir çok özelliği var bu özellikler güzel olsa da çok fazla olması kullanıcıyı rahatsız edebilir. Kullanıcı için sade ve kullanışlı olması ön plandadır.Eğer kullanıcının kullanacağı araçlar sadece kalın,altı çizgili,sağ sola yasla,ve renk ise karşısına daha fazlasını çıkartmanın bir anlamı yok.Bunun için yapmamız gereken aşağıdaki gibi bir ayarlama:

[code lang="javascript"]<script type="text/javascript">
CKEDITOR.replace('editor1',{
toolbar:[[ 'Bold', 'Italic', 'Underline', 'Strike','-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' , '-', 'TextColor' ]]
});
</script>[/code]

bu işlemi ayar(config.js) dosyasında yapmak için :

[code lang="javascript"]CKEDITOR.editorConfig = function (config) {
config.toolbar:[
[ 'Bold', 'Italic', 'Underline', 'Strike','-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' , '-', 'TextColor' ]
]
});[/code]

Bu ayarla çalıştırdığımız CKEditor şu şekilde olacaktır:

Kullanılabilir tüm araçlar:

[box type="note" style="rounded"][ ‘Source’, ‘-‘, ‘Preview’, ‘-‘, ‘Templates’ ] ,
[ ‘Cut’, ‘Copy’, ‘Paste’, ‘PasteText’, ‘PasteFromWord’, ‘-‘, ‘Undo’, ‘Redo’ ] ,
[ ‘Find’, ‘Replace’, ‘-‘, ‘SelectAll’] ,
[ ‘Form’, ‘Checkbox’, ‘Radio’, ‘TextField’, ‘Textarea’, ‘Select’, ‘Button’, ‘ImageButton’, ‘HiddenField’ ] ,
‘/’,//Satır sonu
[ ‘Bold’, ‘Italic’, ‘Underline’, ‘Strike’, ‘Subscript’, ‘Superscript’, ‘-‘, ‘RemoveFormat’ ] ,
[ ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Outdent’, ‘Indent’, ‘-‘, ‘Blockquote’, ‘CreateDiv’, ‘-‘, ‘JustifyLeft’, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’ ] ,
[ ‘Link’, ‘Unlink’ ] ,
[ ‘Image’, ‘Flash’, ‘Table’, ‘HorizontalRule’, ‘Smiley’, ‘PageBreak’] ,
[ ‘Styles’, ‘Format’, ‘Font’, ‘FontSize’ ] ,
[ ‘TextColor’, ‘BGColor’ ],
[ ‘Maximize’, ‘ShowBlocks’ ] ,[/box]

[box type="tick" style="rounded"]
Diğer yazılar:

CKEditor Kullanımı – Kurulum
CKEditor Kullanımı – Ayarlar
CKEditor Kullanımı – Dosya Yöneticisi
CKEditor Kullanımı – Ajax Post
[/box]

Devam

En çok okunanlar Genel

Ckeditor Kullanımı – Kurulum

Mayıs 22, 2014Ağustos 30, 2017 Samet ATABAŞ 2 yorum ckeditor, metin editörü, zengin metin alanı

Projelerimizde gelişmiş elemanlar barındıran bir yazı (blog yazısı gibi) oluşturmak için sayfalar hazırlarız , bu sayfamızda yazının girileceği eleman sadece textarea olursa düz metinden ileri gidemeyiz.Daha gelişmiş yazılar yazmak için gelişmiş metin editörleri kullanırız.
Ckeditor en çok kullanılan metin editorlerinden biri resim ,video,flash animasyon,tablo,liste,form gibi birçok elemanı kullanmanıza olanak sağlıyor

CKEditor Kurulumu

Kurulum kelimesi ckeditor için biraz fazla geliyor aslında oldukça basit bir işlem. Download Ckeditor Sayfasından ckeditor ü indirdikten sonra zip dosyasının içeriğini sitenizin ana dizinine çıkartın.Artık http://<siteniz>/ckeditor/samples/index.html adresinde ckeditor ün çalışan bir örneğini görebilirsiniz(Localhost üzerinde çalışıyorsanız bu adres:http://localhost/ckeditor/samples/index.html şeklinde olacaktır.).

Şimdi örnek bir sayfa ile nasıl kullanıldığına bakalım

[code lang="html"]<!DOCTYPE html>
<html>
    <head>
        <title>CKEditor Örnek</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                Gelişmiş elemanları bulunan metin alanı
            </textarea>
        </form>
    </body>
</html>[/code]

Bu şekilde kodladığımız bir sayfanın aşağıdaki resimdeki gibi oluşuyor.

Bu sayfaya ckeditor ü eklemek için kodları şu şekilde düzenliyoruz:

[code lang="html"]<!DOCTYPE html>
<html>
    <head>
        <title>CKEditor Örnek</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <script src="ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                Gelişmiş elemanları bulunmayan metin alanı
            </textarea>
        </form>
        <script>
            // Ckeditor ü ön tanımlı ayarları kullanarak <textarea id="editor1"> nesnesi üzerinde aktif ediyoruz
            CKEDITOR.replace( 'editor1' );
        </script>
    </body>
</html>[/code]

Sonuç:

Ckeditor i aktif yapmak bu kadar basit . Eğer herhangi bir ayar yapmadan direk ön tanımlı ayarlarla ckeditor kullanacaksanız <textarea> nesnesinin class özelliğine “ckeditor” atamasını yaparak Ckeditor ü aktif hale getirebilirsiniz.Böylece fazladan java sctirpt kodu yazmazsınız.

[code lang="html"]...
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80" class="ckeditor">
                Gelişmiş elemanları bulunmayan metin alanı
            </textarea>
        </form>
    </body>
</html>[/code]

Sonraki yazılarımda ckeditor bazı ayarlarından, ckeditor e dosya yöneticisi bağlanmak ve ajax ile ckeditor kullanmaktan bahsedeceğim.Umarım kısa zamanda vakit ayırıp yazabilirim.

[box type="tick" style="rounded"]
Diğer yazılar:

CKEditor Kullanımı – Ayarlar
CKEditor Kullanımı – Toolbar Düzenlemesi
CKEditor Kullanımı – Dosya Yöneticisi
CKEditor Kullanımı – Ajax Post
[/box]

Devam