TinyMCE Editör Alanı Kurulumu ve Kullanımı

Nisan 16 19:52 2014 Yazar: A.Gökhan, M.Sc. Bu yazıyı yazdır

Yönettiğimiz ve kullandığımız web sitelerinin çoklu metin girme alanlarında düzenlenebilir editoryal alanları sürekli olarak kullanmaktayız. Microsoft Office programlarından bilinen bu görüntüyü hepiniz biliyorsunuz. Tabi bunların web için geliştirilmiş olanları da mevcut. Bunların en yaygın olarak kullanılanı TinyMCE.

Bu yararlı ve açık kaynak kodlu aracı TinyMCE resmi web sitesinden ücretsiz olarak indirilebilmektedir. Mevcut sürüm 4.0.21: TinyMCE, nasıl çalıştığını denemek için ise burayı kullanabilirsiniz: TRY Online

İlgili dosyaları bilgisayarınıza indirdikten sonra aşağıdaki kodları yazacağınız form.html adında bir dosya oluşturun ve herhangi bir internet tarayıcısında çalıştırın:

<!-- Place inside the <head> of your HTML -->
<script type="text/javascript" src="tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea"
 });
</script>

<!-- Place this in the body of the page content -->
<form method="post">
    <textarea></textarea>
</form>

tinymce.init({

selector: "textarea"

});

</script>

</form>

Yukarıdaki kodları çalıştırdığımızda aşağıdaki görüntü elde edilecektir:

TinyMCE Ekran Önizlemesi

Bu görüntüde bulunan editör özelliklerini tinymce.init içerisinde oluşturabiliriz. Örneğin genişlik ve yükseklik oluşturmak için JQuery kodlarını şu şekilde düzenleyelim:

tinymce.init({
    width: 800,
    height: 500,
    selector: "textarea"
 });

tinymce.init({

width: 800,

height: 500,

selector: "textarea"

});

Genel özellikleri ile dolu olan bir editoryal alan için aşağıdaki kodları kullanabilirsiniz.

tinymce.init({
    width: 800,
    height: 500,
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor moxiemanager"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons | sizeselect | bold italic | fontselect |  fontsizeselect",
    image_advtab: true,
});

tinymce.init({

width: 800,

height: 500,

selector: "textarea",

theme: "modern",

plugins: [

"advlist autolink lists link image charmap print preview hr anchor pagebreak",

"searchreplace wordcount visualblocks visualchars code fullscreen",

"insertdatetime media nonbreaking save table contextmenu directionality",

"emoticons template paste textcolor moxiemanager"

image_advtab: true,

});

Yukarıdaki şekliyle düzenlenen form alanı şu şekilde görüntülenecektir:

Ek özellikler ile TinyMCE

Yazı şöyle etiketlendi:

Kategoriler:

daha fazla yazı görüntüle

Yazar Hakkında

A.Gökhan, M.Sc.

My Name is A. Gokhan SATMAN, and I am a software engineer, Author and game developer. gokhansatman.com

Daha fazla yazı görüntüle

daha fazla yazı görüntüle

İlgili Yazılar

Yorum yaz

6 Yorum

Ağustos 29, 23:31 #1 Mesut Nohutcu
İlk defa TinyMCE kullanacağım, aydınlatıcı bilgi verdiğiniz için çok teşekkür ederim. Saygılarımla
Reply to this comment
- Ağustos 30, 00:03 A.Gökhan Author
  Çalışmalarınızda kolaylıklar dileriz.
  Reply to this comment
Aralık 08, 22:15 #2 CarltonNus
Fine article
Reply to this comment
Şubat 06, 16:33 #3 Sadettin ilgün
Bu editörde yazı girilirken karakter sayma ve sınırlama işlemi nasıl yapılır?
Reply to this comment
Aralık 29, 04:05 #4 ch
Nasıl türkçe yapabiliriz ?
Reply to this comment