Herşeyi ile TinyMce Klavuzu 2

TinyMCE Kurulumu Nasıl Yapılır ve Desteklediği Diller Nelerdir ?

   Buradan indirdiğiniz paketin sayfanıza entegrasyonunun nasıl yapılacağını açıklamadan önce TinyMCE nin PHP, ASP.NET, JSP, CFM dillerinde sorunsuzca çalıştığını ve kurulumlarının hemen hemen aynı olduğunu söylemek isterim. TinyMCE nin jQuery uyumlu olduğunu ve kütüphanesinin jQuery ile de yazılmış bir versiyonunun bulunduğunu bilmenizde fayda var.

   Kuruluma başlayabiliriz artık, indirdiğiniz paketi zip ten çıkarttıktan sonra tinymce isimli bir klasör göreceksiniz, ihtiyacımız olan işlem; sayfamıza ilgili dosyayı entegre etmek ve ayarlarını yapmaktır.

tinyMCE.init({
   mode : "textareas"
});

biraz daha gelişmiş kurulum

tinyMCE.init({
	theme : "advanced",
	mode : "textareas",
	plugins : "fullpage",
	theme_advanced_buttons3_add : "fullpage"
});

yukarıdaki iki konfigürasyon örneğinde de sayfadaki tüm textarea taglı elementler etkilenmektedir. Birden fazla textarea elementi varsa ve bazılarını tinymce olarak görünmesini istemiyorsanız veya sayfanızda yer alan textarea elementlerinde farklı kombinasyonlarda görünüm ve işlevsellik kullanmak istiyorsanız şimdi vereceğim konfigürasyonu kullanmalısınız.

tinyMCE.init({
	mode : "textareas",
	theme : "simple",
	editor_selector : "mceEditor",
	editor_deselector : "mceNoEditor"
});

class=”mceEditor” attribute da verdiklerinizde editör görüntülecenek class=”mceNoEditor” verdiklerinizde görüntülenmeyecektir. Hepsine yazmak zorundamıyız dediğinizi duyar gibiyim, hayır bir çözüm yolu daha var o da şöyle;

tinyMCE.init({
	theme : "advanced",
	mode : "specific_textareas"
});

bu yöntemde ise hangi textarea elementinin class attribute una mceEditor yazarsanız, sadece o editör de tinymce editörü görüntülenecektir. Birden fazla textarea üzerinde farklı işlevsellik için ise :

tinyMCE.init({
	mode : "textareas",
	theme : "simple",
	editor_selector : "mceSimple"
});

tinyMCE.init({
	mode : "textareas",
	theme : "advanced",
	editor_selector : "mceAdvanced"
});

html kısmı ise :

tinyMCE.init({
		// Seçenekler
		mode : "textareas",
		theme : "advanced",
		plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",

		// Tema seçenekleri
		theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,
justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,
outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,
forecolor,backcolor",
		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
		theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,
acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : true,

		// ek stil dsyası
		content_css : "css/content.css",

		// link/image/media/template açılır menü
		template_external_list_url : "lists/template_list.js",
		external_link_list_url : "lists/link_list.js",
		external_image_list_url : "lists/image_list.js",
		media_external_list_url : "lists/media_list.js",

		// Stil formatları
		style_formats : [
			{title : 'Bold text', inline : 'b'},
			{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
			{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
			{title : 'Example 1', inline : 'span', classes : 'example1'},
			{title : 'Example 2', inline : 'span', classes : 'example2'},
			{title : 'Table styles'},
			{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
		],

		// Template plugin i için veriler
		template_replace_values : {
			username : "TheGkmnKc",
			staffid : "465636"
		}
	});