2

JSF 2.1 を使用しています。で TinyEditor を使用しようとしてい<h:inputTextarea>ます。ここに私のコードがあります、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>

    <h:outputStylesheet library="css" name="editor_style.css" />
    <h:outputStylesheet library="css" name="css/main.css" />
    <h:outputStylesheet library="css" name="css/dropdown.css" />    
    <h:outputScript name="js/tinyeditor.js"></h:outputScript>
</h:head>

<h:body>
    <div class="content">
        <ui:include src="/template/layout/commonLayout.xhtml" />
        <ui:include src="/template/layout/menu.xhtml" />
        <h:form>
            <div class="quick_links">
                <div class="q_title">                   
                </div>
                <div class="q_window">
                    <div class="q_top"></div>
                    <div class="q_main">

                        <h:inputTextarea value="#{EditorBean.value}" id="input"
                            style="width:100%; height:300px;">Sample FAQ</h:inputTextarea>

                        <h:outputScript>                        
                new TINY.editor.edit('editor',{
                    id:'input',
                    width:945,
                    height:175,
                    cssclass:'te',
                    controlclass:'tecontrol',
                    rowclass:'teheader',
                    dividerclass:'tedivider',
                    controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
                              'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
                              'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',
                              'font','size','style','|','hr','link','unlink'],
                    footer:true,
                    fonts:['Verdana','Arial','Georgia','Trebuchet MS'],
                    xhtml:true,
                    cssfile:'style.css',
                    bodyid:'editor',
                    footerclass:'tefooter',
                    toggle:{text:'Source',activetext:'HTML',cssclass:'toggle'},
                    resize:{cssclass:'resize'}
                });
               </h:outputScript>

                    </div>
                    <div class="q_bottom"></div>
                </div>
                <h:commandButton value="Savebutton" action="#{EditorBean.test}"></h:commandButton>
            </div>
            <div class="push"></div>
        </h:form>
    </div>


</h:body>
</html>

タグを削除する<h:form>と、エディターのみが表示されますが、<h:commandButton>機能しません。<h:form>タグを保持すると<h:commandButton>機能しますが、TinyEditor エディターは初期化されません。

これはどのように発生し、どうすれば解決できますか?

4

1 に答える 1

0

<h:outputScript>完全に正常に動作します。具体的な問題は、独自の JavaScript コードにあります。TinyEditor 構成スクリプトで「input」の ID を指定しました。

id:'input',

ただし、JSF によって生成された HTML 出力には、その ID を持つそのような HTML 要素はありません。はい、JSF によって生成された HTML 出力を確認する必要があります。これは、基本的にブラウザーが取得するものすべてであるためです。JavaScript は Web サーバーでは実行されませんが、Web ブラウザーで実行され、JSF によって生成された HTML 出力のみが表示されます。ブラウザーでページを右クリックし、[ソースを表示] を実行して、自分でもページを表示します。

の生成され<h:inputTextarea>た ID は、この特定の構成で<h:form>先頭に追加された ID を持ちます。あなたの特定のケースでは、 の ID を指定しなかった<h:form>ため、JSF は次のように自動生成し、生成されj_id123た HTML 要素 ID は になります。TinyEditor 構成スクリプトでその ID を正確に指定する必要があります。<textarea><h:inputTextarea>j_id123:input

<h:form>ただし、コンポーネントをビューに追加/削除するたびに自動生成された ID が変更される可能性があるため、 で固定 ID を指定することをお勧めします。

<h:form id="form">
    <h:inputTextarea id="input" />
    ...

このようにして、生成<textarea>された は の ID を取得しますform:input。次に、TinyEditor 構成スクリプトで使用できます。

id:'form:input',
于 2012-12-05T12:08:05.350 に答える