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

by A.Gökhan, M.Sc. | Nisan 16 19:52

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.

[1]

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

İ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:

[4]

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:

[5]

Ek özellikler ile TinyMCE

Endnotes:

[Image]: http://www.phpservisi.com/wp-content/uploads/2014/04/acknowledgements_logo_tinymce.png
TinyMCE: http://www.tinymce.com/index.php
TRY Online: http://www.tinymce.com/tryit/basic.php
[Image]: http://www.phpservisi.com/wp-content/uploads/2014/04/edit.jpg
[Image]: http://www.phpservisi.com/wp-content/uploads/2014/04/edit2.jpg

Source URL: http://www.phpservisi.com/tinymce-editor-alani-kurulumu-ve-kullanimi/