Struts 2 / Tiles / Tiny MCE

[sam jsem]

Hi.

I am using Struts 2.2.1 with Tiles. I am encountering the following issue: In my tile with the HTML 'head' section I declare some Javascript to invoke the TinyMCE WYSIWYG editor for HTML 'textareas' (please see below); however, when I run the application the Javascript that should invoke the TinyMCE WYSIWYG does not execute. Consequently, the TinyMCE WYSIWYG is never rendered.

When I test the application in IE 7, the page renders just fine with textareas, but I do not see the WYSIWYG options of Tiny MCE. A more telling illustration comes for Firefox 3.6. When I view the source of the HTML that is generated, I see the following:

<link href="/ApplicationName/commons/ApplicationName.css" rel="stylesheet" type="text/css"/> <script language="Javascript" type="text/javascript" src="/ApplicationName/commons/tiny_mce/tiny_mce.js"/> <script language="Javascript" type="text/javascript"> tinyMCE.init({theme : "advanced",mode : "textareas" }); </script> <script src="/ApplicationName/struts/utils.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> // Dojo configuration djConfig = {isDebug: false,bindEncoding: "UTF-8",baseRelativePath: "/ApplicationName/struts/dojo/",baseScriptUri: "/ApplicationName/struts/dojo/",parseWidgets : true}; <script language="JavaScript" type="text/javascript" src="/ApplicationName/struts/dojo/struts_dojo.js"></script> </script> ...

I am able to the click on the 'src' and 'href' elements of the page in the Firefox view source window and actually see the generated 'struts_dojo.js' and my 'ApplicationName.css' file, but when I click on the key element 'src' and value '/ApplicationName/commons/tiny_mce/tiny_mce.js' associated with it, I get a HTML 404 listing.

I have copied the code from the IE and Firefox view source window, and pasted it into an test HTML file. When I launch this HTML file and view the source from Firefox for the key element 'src' and value '/ApplicationName/commons/tiny_mce/tiny_mce.js' I can actually see the Javascript. Also, the Tiny MCE WYSIWYG editor renders fine. I was hoping someone could help me understand why this is the case, and how I can get my Struts 2 application to render the Tiny MCE Javascript code. I include what I believe is the code necessary to understand my setup.

Struts 2:

I am using the 'simple' UI theme as we construct our own CSS / HTML layout. In my 'struts.properties' file I include the following line:

struts.ui.theme=simple

The relevant sections of my 'web.xml' file:

<filter> <filter-name>struts2</filter-name> <filter-class>xxx.StrutsPrepareAndExecuteFilter</filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/struts/*</url-pattern> </filter-mapping> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

Here is the code from my tile which includes the HTML 'head' element.

		<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
		<title><tiles:insertAttribute name="title"/></title>
		<link href="<s:url value="/commons/ApplicationName.css"/>" rel="stylesheet" type="text/css"/>
		<script language="Javascript" type="text/javascript" src="/ApplicationName/commons/tiny_mce/tiny_mce.js"/>
		<script language="Javascript" type="text/javascript"> tinyMCE.init({theme : "advanced",mode : "textareas" }); </script> 
		<s:head/>
		<sx:head parseContent="true"/>

Note in the line

<script language="Javascript" type="text/javascript" src="/ApplicationName/commons/tiny_mce/tiny_mce.js"/>

, I have also tried

src="<s:url value="/commons/tiny_mce/tiny_mce.js"

which appends the jsessionid to the end of the generated value for HTML element 'src', and

src="${pageContext.request.contextPath}/commons/tiny_mce/tiny_mce.js"

. Neither of these seem to help, so I ended up trying to add the relative URI to the value of the 'src' element as above.

Does anyone have any suggestions as to why the 'tiny_mce.js' file is not being called? If there are any details I have left out, please let me know.

Thanks.

[Jesus Mireles]

I'm using tinyMCE with not issues but I would suggest changing your javascript that calls the init. Either move it to the bottom of the document or modify it to execute on DOM ready. So something like this:

$(document).ready(function() { tinyMCE.init({theme : "advanced",mode : "textareas" }); });

[sam jsem]

Lucas:

Thanks for you response. I tried you suggestion as in the code below. Unfortunately: No luck. The odd striking phenomenon here is that when I look at the source code for Firefox and click on the associated values from the 'src' element, they will generate the Javascript or CSS, including the CSS I am using. However, when I click on the link associated with the 'src=/ApplicationName/commons/tiny_mce/tiny_mce.js', I get a HTML 404 page.

Here is what I introduced in my Java code as per your suggestion:

<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
	<title><tiles:insertAttribute name="title"/></title>
	<link href="<s:url value="/commons/ApplicationName.css"/>" rel="stylesheet" type="text/css"/>
	<s:head/>
	<sx:head parseContent="true"/>
	<script language="Javascript" type="text/javascript" src="${pageContext.request.contextPath}/commons/tiny_mce/tiny_mce.js"/>
	<script language="Javascript" type="text/javascript"> 
		$(document).ready(function() { tinyMCE.init({theme : "advanced",mode : "textareas" }); });
	</script>
</head>

Here is what was generated by the browsers:

<head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>Main Page</title> <link href="/ApplicationName/commons/ApplicationName.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="/ApplicationName/struts/css_xhtml/styles.css" type="text/css" /> <script src="/ApplicationName/struts/utils.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> // Dojo configuration djConfig = { isDebug: false, bindEncoding: "UTF-8" ,baseRelativePath: "/ApplicationName/struts/dojo/" ,baseScriptUri: "/ApplicationName/struts/dojo/" ,parseWidgets : true }; </script> <script language="JavaScript" type="text/javascript" src="/ApplicationName/struts/dojo/struts_dojo.js"></script> <script language="JavaScript" type="text/javascript" src="/ApplicationName/struts/ajax/dojoRequire.js"></script> <link rel="stylesheet" href="/ApplicationName/struts/xhtml/styles.css" type="text/css"/> <script language="JavaScript" src="/ApplicationName/struts/utils.js" type="text/javascript"></script> <script language="JavaScript" src="/ApplicationName/struts/xhtml/validation.js" type="text/javascript"></script> <script language="JavaScript" src="/ApplicationName/struts/css_xhtml/validation.js" type="text/javascript"></script> <script language="Javascript" type="text/javascript" src="/ApplicationName/commons/tiny_mce/tiny_mce.js"/> <script language="Javascript" type="text/javascript"> $(document).ready(function() { tinyMCE.init({theme : "advanced",mode : "textareas" }); }); </script> </head>

I tried to add the Javascript code to the tile with the HTML 'head' element, and in the tile that includes all the content. But both times there were no errors that IE7 and Firefox 3.6 recognized, but they would not render the Tiny MCE WYSIWYG editor for textareas.

Do you think the issue is that as a consequence of my Java code, the browser, app. server, or whatever cannot find the 'tiny_mce.js' file? Is it because the browser cannot resolve the link: ''.

When I copy and paste the code from the browser view source window into a test HTML file, and I run that file, the Tiny MCE WYSIWYG editor appears no problem. Also, when I view the source of my test HTML file, the link that points to the 'tiny_mce.js' file generates the file no problem. But when I run that page as part of my Web application on WebLogic, it does not resolve the link that should be point to the file 'tiny_mce.js'; and it does not render the Tiny MCE WYSIWYG editor. Any thoughts?

Thanks

[Jesus Mireles]

where is the library located?

is it located at: /ApplicationName/commons/tiny_mce/tiny_mce.js

[sam jsem]

I am certain that the file directory path is: '%APPLICATION_CONTEXT_ROOT/commons/tiny_mce/tiny_mce.js'. I am really puzzled as to what to do now.

Would you mind sharing the 'head' section of your HTML document?

Thanks.

[Jesus Mireles]

sam jsem wrote:I am certain that the file directory path is: '%APPLICATION_CONTEXT_ROOT/commons/tiny_mce/tiny_mce.js'.

The thing is that you should be able to open a browser and confirm the location. If you cannot access it via the browser then you're going to get the 404 in the code.

I'm using tiles like you ... the relevant part of the code that you want to see is:

<script type="text/javascript" src="<s:url value="/js/jquery-1.4.4.min.js"/>"></script> <script type="text/javascript" src="<s:url value="/js/jquery-ui-1.8.9.custom.min.js"/>"></script> <script type="text/javascript" src="<s:url value="/js/tiny_mce/tiny_mce.js"/>"></script> <script type="text/javascript" src="<s:url value="/js/snares.js"/>"></script>

In my particular case my application context is / so when the html renders it renders as:

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="/js/jquery-ui-1.8.9.custom.min.js"></script> <script type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="/js/snares.js"></script>

I put the code I gave you earlier in /js/snares.js

Anyway, I think you just need to figure out where the javascript is actually being deployed to ...

-Lucas

[sam jsem]

Lucas,

Thanks again for your timely assistance.

Since we have a similar implementation, I thought I might share with the fruits of my two days of excruciating labour: Struts 2 jQuery Plugin Showcase. It appears as though there is a plugin for Tiny MCE. I was able to success deploy it into my application; furthermore, there are also lots of other goodies.

Thanks again for all your help. Cheers.