1

TinyMCE 3.5 を含めたい JSF 2.0 Web アプリケーションがあります。

私がそれを含めた方法は以下のようなものです:

<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ファイルへの参照を持っていることです。これらの参照は、末尾が .xhtml でないため、404 エラーを返します。

例: 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 ")すべてがうまく機能します。

そこで、.js ファイルのデフォルトの末尾として xhtml を追加できる方法があるかどうか、または .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>1 つの解決策は、目的の 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 に答える