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

Question

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.

*.js.xhtml would be very horrible... check your web.xml or faces-config.xml, if there is any limitation on *.xhtml ending... otherwise, why don't you put all the tinymce files in one folder? — Tobi, Apr 27 '12 at 06:40
thanks for your suggestions, Tobi.I agree with you. js.xhtml is no option. web.xml and faces-config.xml seem to be okay. All .js files in one folder wont solve the problem, because some of these .js files are referencing others (and therefore the structure needs to remain). — mooonli, Apr 27 '12 at 06:45
Okay... would this maybe help you? http://stackoverflow.com/questions/3008395/jsf-facelets-sometimes-i-see-the-url-is-jsf-and-sometimes-xhtml-why — Tobi, Apr 27 '12 at 06:49

BalusC · Accepted Answer · 2020-04-08T11:23:11.240

3

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.

edited Apr 08 '20 at 11:23

answered Apr 27 '12 at 14:02

BalusC

1,082,665
372
3,610
3,555

BalusC i have the same issue but resources folder should be under which directory – love kumar Apr 08 '20 at 12:28
It's just the same resources folder. The only change is replacing `` by ` – BalusC Apr 08 '20 at 12:40
i have defined but getting failed to load 404 – love kumar Apr 08 '20 at 12:49
BalusC please help me to solve this,i'm facing issue from long – love kumar Apr 08 '20 at 12:56
If you have `/resources/xxx/yyy.js` then you need to use ` – BalusC Apr 08 '20 at 13:56
" – love kumar Apr 08 '20 at 14:35
If that one returns 404 then it's not placed in `/resources/xxx/yyy.js`. – BalusC Apr 08 '20 at 14:52

score 0 · Answer 2 · answered Apr 27 '12 at 06:54

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>

score 0 · Answer 3 · answered Jun 12 '15 at 10:33

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>

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

3 Answers3