1

我有一个 JSF 2.0 Web 应用程序，我想在其中包含 TinyMCE 3.5。

我包含它的方式如下：

<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>

现在一切正常。我唯一的问题是“tiny_mce.js”对 tiny_mce 文件夹中的其他 js 文件有一些引用。这些引用返回 404 错误，因为它们没有 .xhtml 结尾。

示例：tiny_mce.js 引用 en.js。它试图从“ http://localhost:8080/briefe/javax.faces.resource/js/tiny_mce/langs/en.js ”加载它。如果我在浏览器中输入这个 URL，我会得到一个 404。如果我最后添加 .xhtml (" http://localhost:8080/briefe/javax.faces.resource/js/tiny_mce/langs/en.js.xhtml ") 一切正常。

所以我想问你，是否有一种方法可以将 xhtml 添加为 .js 文件的默认结尾，或者是否有一种方法可以使 .js 文件可访问。

4

3 回答 3

3

这<h:outputScript>将生成一个 JSF 资源 URL，由其处理，ResourceHandler从而允许模块化和版本控制，而无需更改<h:outputScript name>. 当FacesServlet映射到 时*.xhtml，资源 URL 将如下所示

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

TinyMCE 脚本显然是根据脚本自己的 URL 自动包含一些其他脚本，而不考虑.xhtml后缀。

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

这确实会导致 404。当您对FacesServletlike使用前缀映射时/faces/*，就不会出现此问题。

一种解决方案是<script>自己用所需的 URL 硬编码。正确的替代品将是

<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"/>

唯一的缺点是，当您在单个视图中使用多个复合组件时，您最终会<script>在正文中获得多个条目，而不是像<h:outputScript>. 这可能会导致 JavaScript 冲突/错误。如果您遇到此问题，我会考虑相应地破解/修复 TinyMCE JavaScript 文件，将.xhtml后缀添加到 URL，以便您可以继续使用<h:outputScript>. 或者，您当然可以使用现有的、即用型 JSF 富文本编辑器组件，例如PrimeFaces<p:textEditor>，这样您就不必担心这一切。

于 2012-04-27T14:02:00.693 回答
0

你也可以测试这个而不是<h:outputScript...>

这：

<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>

或类似的东西：

<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>
于 2012-04-27T06:54:36.757 回答
0

我刚刚遇到了这个问题，最简单的解决方案是添加丢失的文件，方法与为 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>
于 2015-06-12T10:33:28.770 回答