TinyMCE .js files not found when using JSF h:outputScript

问题

I have a JSF 2.0 Webapplication into which I d'like to include TinyMCE 3.5.

The way I included it is like below:

<composite:implementation>
    <h:outputScript name="tiny_mce/tiny_mce.js"/>
    <h:outputScript name="js/tinymce_init.js"/>
    <h:inputTextarea rows="5" cols="80" styleClass="tinymce" value="#{cc.attrs.value}"/>
</composite:implementation>

Now everything works fine. The only problem I have is that "tiny_mce.js" has some references to other js files in the tiny_mce folder. These references return a 404 error, because they have no .xhtml ending.

Example: tiny_mce.js references en.js. Its trying to load it from "http://localhost:8080/briefe/javax.faces.resource/js/tiny_mce/langs/en.js". If I enter this URL into the Browser I get a 404. If I add .xhtml in the end ("http://localhost:8080/briefe/javax.faces.resource/js/tiny_mce/langs/en.js.xhtml") everything works great.

So I d like to ask you, if there is a way I can add xhtml as default ending for .js files or if there is a way to make .js files accessible.

回答1:

The <h:outputScript> will generate a JSF resource URL which is handled by ResourceHandler which in turn allows modularization and versioning without the need to ever change the <h:outputScript name>. When the FacesServlet is mapped on *.xhtml, the resource URL will look like this

/contextname/javax.faces.resource/filename.js.xhtml

The TinyMCE scripts are apparently auto-including some other scripts based on the script's own URL and not taking the .xhtml suffix into account.

/contextname/javax.faces.resource/otherfile.js

This will then indeed result in 404s. When you're using a prefix mapping for the FacesServlet like /faces/*, then this problem will not occur.

One solution is to hardcode the <script> with the desired URL yourself. The right substitute would then be

<script type="text/javascript" src="#{request.contextPath}/resources/tiny_mce/tiny_mce.js"/>
<script type="text/javascript" src="#{request.contextPath}/resources/js/tinymce_init.js"/>

The only disadvantage is, when you're using multiple composite components in a single view, then you'd end up with multiple <script> entries in the body instead of only one as taken care by <h:outputScript>. This may end up in JavaScript conflicts/errors. If you encounter this problem, I'd consider to hack/fix the TinyMCE JavaScript file accordingly that it adds the .xhtml suffix to the URL, so that you can keep using <h:outputScript>. Or, you can of course use an existing and ready-to-use JSF rich text editor component such as PrimeFaces <p:textEditor>, so that you don't need to worry about this all.

回答2:

You can also test this instead of <h:outputScript...>

this:

<composite:implementation>
    <script language="text/javascript" src="tiny_mce/tiny_mce.js" />
    <script language="text/javascript" src="js/tinymce_init.js" />
    <h:inputTextarea rows="5" cols="80" styleClass="tinymce" value="#{cc.attrs.value}"/>
</composite:implementation>

or something like this:

<script language="text/javascript" src="tiny_mce/tiny_mce.js" />
<script language="text/javascript" src="js/tinymce_init.js" />

<composite:implementation>
    <h:inputTextarea rows="5" cols="80" styleClass="tinymce" value="#{cc.attrs.value}"/>
</composite:implementation>

回答3:

I've just came across this problem and the simplest solution is that you add missing files the same way you added for tiny_mce.js

        <!-- TinyMCE -->
        <h:outputScript library="libs" name="js/tinymce/4.1.10/tinymce.min.js"></h:outputScript>
        <!-- TinyMCE theme -->
        <h:outputScript library="libs" name="js/tinymce/4.1.10/themes/modern/theme.min.js"></h:outputScript>
        <!-- TinyMCE plugins -->
        <h:outputScript library="libs" name="js/tinymce/4.1.10/plugins/advlist/plugin.min.js"></h:outputScript>
        <h:outputScript library="libs" name="js/tinymce/4.1.10/plugins/autolink/plugin.min.js"></h:outputScript>
        <h:outputScript library="libs" name="js/tinymce/4.1.10/plugins/lists/plugin.min.js"></h:outputScript>
        <h:outputScript library="libs" name="js/tinymce/4.1.10/plugins/charmap/plugin.min.js"></h:outputScript>

来源：https://stackoverflow.com/questions/10345887/tinymce-js-files-not-found-when-using-jsf-houtputscript

标签

jsf

tinymce