Rich Text Area using TinyMCE in Spring MVC application

[sajjad ahmad]

I have created an MVC applicaiton using ROO , I am trying to use a rich text area in my creat.jspx page. I am using TinyMCE.

The Java script files are attached correctly but it looks like spring mvc tag for area is not accepting the effects tinyMCE library is trying to apply on it because I still see a normal text area.

I also tried tinyMCE ina separte Web applicaiton (j2ee) and can see the desired rich text area when using it from a jsp page.

I have a feeling that somehow the spring mvc tag is forcign it's own css and java scripts on text area and overriding TinyMCE in this case.

This is now pissing me off , I have no clue why this is happening. Cna any body out there help me to understand whats going on here?


Regards,
Sajjad Ahmed Paracha

My Technical Blogs
J2EE Frameworks : http://comparingexsitingj2eeframeworks.blogspot.com/
Adobe Flex : http://adobeflexandj2ee.blogspot.com/
JAVA : http://javaiscoool.blogspot.com/
Design Pattern : http://designpatterndiscussions.blogspot.com/

“Only as high as I reach can I grow, only as far as I seek can I go, only as deep as I look can I see, only as much as I dream can I be.” Karen Ravn

[Bill Gorder]

Please BeForthrightWhenCrossPostingToOtherSites
http://forum.springsource.org/showthread.php?132867-Rich-Text-Area-using-TinyMCE-in-Spring-MVC-application&p=432120#post432120

[Bill Gorder]

You have not given anyone much information to work with, so the amount of help anyone can give is limited. Try viewing the rendered HTML in Firebug and maybe you can tell better what is happening. There are lots of results on a Google search of TinyMCE and Spring MVC below are the first few.


http://www.tinymce.com/forum/viewtopic.php?id=27106
http://blog.benkuhl.com/2012/05/tinymce-spellcheck-implmentation-with-spring-mvc/
http://webknox.com/q/with-tinymce-how-to-make-a-rich-text-editor-coexist-with-another-textarea

[sajjad ahmad]

Bill Gorder wrote:Please BeForthrightWhenCrossPostingToOtherSites
http://forum.springsource.org/showthread.php?132867-Rich-Text-Area-using-TinyMCE-in-Spring-MVC-application&p=432120#post432120

p


Bill gorder, thanks for your reply. I have posted same question on multiple forums hoping i can get quick help. That should not be a problem, If I find a solution on one thread i willupdate the other thread accordingly.

[Bill Gorder]

sajajad,

If I find a solution on one thread i willupdate the other thread accordingly.

Thanks for doing that. The other part we ask for is just a link to the other cross posted threads. What this allows us to do is look and see what kind of advice (working or not) that has already been given. This way we are not spending our time repeating the same efforts as others. I hope that makes sense.

Did you get a chance to take a look at the outputted HTML? This is often the best way to find out exactly what is causing the problem.

[sajjad ahmad]

Let me give you more details about it , I am writing the below code in spring roo generated application to load the desired js file in my application

  <spring:url value="/resources/javascripts/tinymce/jscripts/tiny_mce/tiny_mce.js" var="tinyMceJavaScript" />

<!-- TinyMCE -->
<script  src="${tinyMceJavaScript}" type="text/javascript"></script>
<script type="text/javascript">
<![CDATA[
  
         

	alert('Loading');
	tinyMCE.init({
		// General options
		mode : "textareas",
		theme : "advanced",
		plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",

		// Theme options
		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,

		// Example content CSS (should be your site CSS)
		// using false to ensure that the default browser settings are used for best Accessibility
		// ACCESSIBILITY SETTINGS
		content_css : false,
		// Use browser preferred colors for dialogs.
		browser_preferred_colors : true,
		detect_highcontrast : true,

		// Drop lists for link/image/media/template dialogs
		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",

		// Style formats
		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'}
		],

		// Replace values for the template plugin
		template_replace_values : {
			username : "Some User",
			staffid : "991234"
		}
	});
	alert('Loading End');
    ]]>
	
</script>
<!-- /TinyMCE -->

on run time in html code I can see the js file in being included correctly (the path is correct) , but I don't see the alert messages , however if I remove line

<script  src="${tinyMceJavaScript}" type="text/javascript"></script>

I can see the alert messages , which means there is some problem when spring is trying to load the js file however I don't see any error both on server console or at browser.

I am almost cluless here that whats going wrong at this point.

Below is the code generated for the page where I am including the js file

<script src="/DrillingBestPractices/resources/javascripts/tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"><script type="text/javascript">                alert('Loading');  tinyMCE.init({   // General options   mode : "textareas",   theme : "advanced",   plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",    // Theme options   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,    // Example content CSS (should be your site CSS)   // using false to ensure that the default browser settings are used for best Accessibility   // ACCESSIBILITY SETTINGS   content_css : false,   // Use browser preferred colors for dialogs.   browser_preferred_colors : true,   detect_highcontrast : true,    // Drop lists for link/image/media/template dialogs   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",    // Style formats   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'}   ],    // Replace values for the template plugin   template_replace_values : {    username : "Some User",    staffid : "991234"   }  });  alert('Loading End');</script>

and the html code for text area where I can't see this whole rich text box thing being applied is

<textarea id="_drlgPracticeDetl_id" name="drlgPracticeDetl"></textarea>

[sajjad ahmad]

Ah , finally resolved the problem. It was the most stupid problem I ever had and it watsed my whole weekend :s.

I found the solution from following website
http://stackoverflow.com/questions/8303050/including-js-files-jquery-in-jspx-files

he problem was apparently the way script tag has to be written in application meant to run on IE I was using the below java script include

<script  src="${tinyMceJavaScript}" type="text/javascript"></script>

The solution ws to write it like

<script  src="${tinyMceJavaScript}" type="text/javascript"><jsp:text /></script>

Below I am copying some stuff from that web site

JSPX has the quirky behaviour that it auto-collapses tags without body. So effectively
<script type="text/javascript" src="route/to/scripts/jquery.js"></script>
<script type="text/javascript" src="route/to/scripts/jquery.ui.js"></script>
<script type="text/javascript" src="route/to/scripts/something.js"></script>
will end up in browser as
<script type="text/javascript" src="route/to/scripts/jquery.js" />
<script type="text/javascript" src="route/to/scripts/jquery.ui.js" />
<script type="text/javascript" src="route/to/scripts/something.js" />
which is invalid <script> syntax (rightclick page in browser and do View Source to see it yourself). The browser behaviour is undetermined.

You can workaround this by putting a <jsp:text /> between the tags
<script type="text/javascript" src="route/to/scripts/jquery.js"><jsp:text /></script>
<script type="text/javascript" src="route/to/scripts/jquery.ui.js"><jsp:text /></script>
<script type="text/javascript" src="route/to/scripts/something.js"><jsp:text /></script>


Please go to the mentioned website for the details.

[Bill Gorder]

Glad you got this resolved. Thanks for posting back with the solution.