TinyMCE Skin - Cirkuit

Example 2 - Default TinyMCE editor with one primary toolbar and two collapsible advanced toolbars

Expand / Collapse advanced toolbars (revised from http://www.neele.name/pdw_toggle_toolbars)
Utilizes jQuery cookie plugin to remember collapsed/expanded state (provided by http://plugins.jquery.com/project/cookie)
Utilizes Cirkuit Skin and TinyMCE 3.4

Code

Show Code



<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="tiny_mce.js"></script>
<script src="http://plugins.jquery.com/files/jquery.cookie.js.txt" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	
	// cookie expiration date
	var cookieExpireDate = new Date();
	cookieExpireDate.setTime(cookieExpireDate.getTime() + (365 * 3 * 24 * 60 * 60 * 1000));

	var tinyMCEInstances = $('.tinyMCE').before('<a class="tinyMceAdvToggle" href="javascript:;">'+($.cookie('mcePDWToggleToolbars') ? 'Hide':'Show')+' Advanced Options<'+'/a>');
	var tinyMCEAdvToggle = $('.tinyMceAdvToggle').click(function(){
		var advButtonsVisible = !$.cookie('mcePDWToggleToolbars');
		$.each(tinyMCEInstances,function(i, obj) {
			var thisEditor = tinyMCE.getInstanceById(this.name); 
			
			thisEditor.execCommand('mcePDWToggleToolbars');
		});

		//put focus in the right editor (otherwise IE always puts focus and scrolls tolast editor if multiple editors are on page)
		var currentEditorId = $(this).next('.tinyMCE').attr('name');
		var currentEditor = tinymce.getInstanceById(currentEditorId); 
		currentEditor.focus();

		if (!advButtonsVisible) {
			tinyMCEAdvToggle.text('Show Advanced Options');
			$.cookie('mcePDWToggleToolbars',null,{path:'/',expires:cookieExpireDate});
		}
		else { 
			tinyMCEAdvToggle.text('Hide Advanced Options');
			$.cookie('mcePDWToggleToolbars',1,{path:'/',expires:cookieExpireDate});
		}
		return false;					
	});

	
	tinyMCE.init({
			mode : "specific_textareas",
			editor_selector : "tinyMCE",
			skin : "cirkuit",
			extended_valid_elements : "iframe[src|width|height|name|align|frameborder|scrolling]",
			theme : "advanced",
			plugins : "pdw,spellchecker,safari,pagebreak,style,layer,table,save,advimage,advlink,advlist,emotions,iespell,inlinepopups,insertdatetime,media,searchreplace,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
			// Theme options
			theme_advanced_buttons1 : "formatselect,fontsizeselect,forecolor,|,bold,italic,strikethrough,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,|,link,unlink,|,spellchecker,|,image",
			theme_advanced_buttons2 : "code,paste,pastetext,pasteword,removeformat,|,backcolor,|,underline,justifyfull,sup,|,outdent,indent,|,hr,anchor,charmap,|,media,|,search,replace,|,fullscreen,|,undo,redo",
			theme_advanced_buttons3 : "tablecontrols,|,visualaid",
			
			pdw_toggle_on : !$.cookie('mcePDWToggleToolbars'),
	        pdw_toggle_toolbars : "2,3",
			
			theme_advanced_toolbar_location : "top",
			theme_advanced_toolbar_align : "left",
			theme_advanced_statusbar_location : "bottom",
			theme_advanced_resizing : true,

			height : "400",
			width: "680"
	});
});
</script>