LDN - Luminis Developer Network

This week we at Clayton State have been adding channels in preparation for our Luminis installation to go live. While doing the same menial task over and over, it struck us that there has to be a better (and easier) way for other content administrators to add new and edit existing content. Sungard caringly provided a textarea for users to input data which we found completely inadequate, so we replaced it with the powerful TinyMCE editor.

Attached are a few screenshots of what this modification looks like. For a list of TinyMCE features, check out their website here

This implementation requires us to download TinyMCE and unzip the "tiny_mce" (note the underscore) folder contained several folders inside into the "$CP_ROOT/webapps/luminis/js" directory, and then make one change to our "channel.xsl" file. The directory of "$CP_ROOT/webapps/luminis/js" should then look similar to this:

__$CP_ROOT/webapps/luminis/js
   |__tiny_mce
      |__langs
      |__license.txt
      |__plugins
      |__themes
      |__tiny_mce.js
      |__tiny_mce_popup.js
      |__tiny_mce_src.js
      |__utils

In our case, we have centralized all of our changes into the file "$CP_ROOT/webapps/luminis/WEB-INF/uPortal/org/jasig/portal/channels/cpicons/channel.xsl" since this is a location where local modification (seems to be) encouraged. This also keeps our changes outside of nested-tables.xsl which will likely be replaced when Sungard releases updates. If you do not have a "channel.xsl" file, then note the code below can go inside any ".xsl" file that is read on each page request (for example, nested-tables.xsl)

Inside of our channel.xsl file, place the following code first (Inside the context of <xsl:stylesheet ... > <xsl:template match="/">):

<!--- Made for rich text editing  -->
<xsl:call-template name="tinymce" />

This code calls a template named "tinymce" which we are about to create (below). Insert this next bit of code (Inside the context of <xsl:stylesheet ... >):

<xsl:template name="tinymce">
	<script src="js/tiny_mce/tiny_mce.js" type="text/javascript"></script>

	<script language="javascript" type="text/javascript">
		//Instantiate our TinyMCE object with the following options below. 
		//Explainations for these options can be found at 
		//http://wiki.moxiecode.com/examples/tinymce/installation_example_00.php
		tinyMCE.init({
				mode : "none",
				theme : "advanced",
				plugins : "table,advimage,advlink,emotions,preview,media,searchreplace,contextmenu,paste,fullscreen,visualchars",
				theme_advanced_buttons1 : "newdocument,preview,fullscreen,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
				theme_advanced_buttons2 : "search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,code,|,forecolor,backcolor",
				theme_advanced_buttons3 : "tablecontrols,|,hr,sub,sup,|,charmap,emotions",
				theme_advanced_toolbar_location : "top",
				theme_advanced_toolbar_align : "left",
				theme_advanced_statusbar_location : "bottom",
				theme_advanced_resizing : true,
				invalid_elements: "!doctype,body,head,html"
		});

		window.onload = function() {
			//Gets a handle for all textarea tags
			var contents = document.getElementsByTagName('textarea');
			for(var x = 0; x &lt; contents.length; x++) {
					//Autogenerate a unique ID
					var handle = "textarea_no_" + x;
					//Set this id to each textarea
					contents[x].setAttribute('id', handle);
					//Create a new paragraph tag (to hold our "toggle" link)
					var p = document.createElement('p');
					//Append this paragrah tag after the textarea tag
					contents[x].parentNode.appendChild(p);
					//Create our link tag
					var link = document.createElement('a');
					//Make the href call our toggle_tinymce() funtion below
					link.setAttribute('href','javascript:toggle_tinymce(\'' + handle + '\')');
					//Optional highlighting via Scriptaculous to visually 
					//show which textarea will be replaced - ignored by IE6
					link.setAttribute('onmouseover','new Effect.Highlight(\'' + handle + '\')');
					//Optional class name if additional styling is wanted
					link.setAttribute('class','toggle_tinymce_link');
					//The text that the link will show
					link.innerHTML = 'Toggle advanced text editor (' + (x+1) + ')';
					//Append this inside our paragraph tag above
					contents[x].parentNode.appendChild(link);
			}
		}
		
		//Receives an id of a textarea
		function toggle_tinymce(id) {
			//Create a handle of the id received
			var elm = document.getElementById(id);
			//Code from TinyMCE's documentation to toggle 
			//the textarea passed into the TinyMCE editor with the options above
			if (tinyMCE.getInstanceById(id) == null)
					tinyMCE.execCommand('mceAddControl', false, id);
			else
					tinyMCE.execCommand('mceRemoveControl', false, id);
		}
	</script>
</xsl:template>

Save the file, and bounce your webserver. If all works according to plan, you should see the link in the screenshots that are attached below every instance of a textarea.

* Updated Tuesday, March 4 2008 to make the context in which the code snippets are placed more clear
* Updated Wednesday, February 20 2008 to include correct filename
* Updated Wednesday, February 20 2008 to show &lt; instead of < - thanks ahoward
-also included diagram of TinyMCE tree after being successfully extracted