wordpress tinymce javascript wysiwyg editor

Tek istediğim yorum bölümünde şuan kullandığım etiket menüsünü görsel açıdan geliştirmek kalın,italik,link vs. yazıları yerine standart editör ikonlarını eklemek istiyorum arayışım devam ediyor malum kodlama bilgim olmadığından uygun bir örnek gerekli :)

Araştırmalar denemeler sonucu istediğim basit işlemi yapmak bir tarafa daha gelişmiş editörleri çözüyorum istediğimi yapamadım ama her işte bir hayır vardır TinyMCE wordpress temanızda basit ve tam fonksiyon nasıl kullanırsınız anlatmaya çalışayım

Öncelikle Resmi sitesinden son sürümü indirin zip dosyasından çıkartın tema klasörüne atın tema klasöründeki yorum bölümü comments.php dosyasınına textarea kodlarının üstüne aşağıdaki script kodlarını ekleyin

<script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory'); ?>/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({

    mode : "textareas",

});
</script>

Örnek yerleşim

Yukarıdaki script kodlarını eklediğinizde aşağıdaki resimde olduğu gibi yorum bölümüne basit fonksiyonları az bir etiket menüsü ekleniyor

TinyMCE Basit Örnek
TinyMCE Basit Örnek

Şimdi gelişmiş fonksiyonları nasıl kullanırız resmi sitede Full featured example bölümüne gidiyoruz örneklerden istediğimiz bulup View Source butonuna tıklıyoruz örnek kod görünümünü alıyor kod penceresinin üstünde bulunan silik yazı şeklinde view source yazısına tıklıyoruz popup içinde kaynak kodlar açılıyor diğer şekilde kopyalama yaptığınızda numaralandırma bilgileride alınır temizlemek ile uğraşırsınız copy yapsanız ayıklamak için uğraşırsınız en iyisi popup :) açılan pencerede kodun bir kısmını alıyoruz

Yapılan işlemlerin gif animasyonu
http://img56.imageshack.us/my.php?image=28732245qi7.gif

Örnek daha gelişmiş bir editör için kullanılan kodlar

<script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory'); ?>/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({

		theme : "advanced",
    mode : "textareas",
	plugins : "bbcode",
	theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code",
	theme_advanced_buttons2 : "",
	theme_advanced_buttons3 : "",
	theme_advanced_toolbar_location : "bottom",
	theme_advanced_toolbar_align : "center",
	theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
	content_css : "css/bbcode.css",
	entity_encoding : "raw",
	add_unload_trigger : false,
	remove_linebreaks : false,
	inline_styles : false,
	convert_fonts_to_spans : false
});
</script>

Yukarıdaki kodları kullandığınızda yeni menü aşağıdaki gibi oluyor

TinyMCE Gelişmiş Örnek
tinymce gelismis ornek

kodlar arasındaki theme_advanced_buttons1 bölümünde kullanılabilen yazım secenekleri var istemediklerinizi silebilirsiniz böylelikle sitenize uygun etiket menüsünü oluşturabilirsiniz

theme_advanced_buttons1 : “bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code”,