0

2 つのモードで使用されるテキスト領域を表示したいと思います。

  • p:editor を使用した変更モード
  • テキスト領域のみが表示される視覚化モード。

この表示モードに最適なコンポーネントはどれですか? 私は試してみました：

  • p : editor : ツールバーを表示したくありません。隠すことはできないようです。
  • p:outputTextarea : p:editor によって生成された html タグがテキストエリアに表示されます
  • h: outputText : レンダリングは p:editor とは少し異なり、何より、垂直スクロール バーがないため、テキストがコンテナーからはみ出します。

編集モードと視覚化モードの両方で p:outputTextarea も試しましたが、p:editor で利用できるその他のツールに興味があります。

何か案が ？

<p:panel id="panelDG">
        <p:dataGrid id="pdatagrid1" layout="grid" value="#{ib.bloc.groups}" var="group" columns="#{ib.bloc.groupsSize}" rowIndexVar="status">
             <!-- other components -->
               <p:panel styleClass="panel-textarea">
                   <s:account>  
                         <p:editor id="editor1" value="#{ib.textArea1}" rendered="#{status == 0}" maxlength="4000" controls="bold italic underline strikethrough bullets outdent indent alignleft center alignright justify undo redo"  />
                         <p:editor id="editor2" value="#{ib.textArea2}" rendered="#{status == 1}" maxlength="4000" controls="bold italic underline strikethrough bullets outdent indent alignleft center alignright justify undo redo"  />
                         <p:editor id="editor3" value="#{ib.textArea3}" rendered="#{status == 2}" maxlength="4000" controls="bold italic underline strikethrough bullets outdent indent alignleft center alignright justify undo redo"  />
                         <h:panelGrid >
                                <p:commandButton value="Save" action="#{ib.modifyGroupText(group)}"  icon="ui-icon-disk" />
                         </h:panelGrid>
                   </s:account>
                   <s:guest>
                          <h:outputText value="#{group.textArea}" escape="false"></h:outputText>
                   </s:guest>
             </p:panel>
       </p:dataGrid>
</p:panel

.panel-textarea{
height: 500px; 
}
4

2 に答える 2

0

<p:editor>ユーザーに編集権限がないために のツールバーを非表示にする場合は、 css を使用するだけです。

フェイスレット

<p:editor styleClass="#{!login.editAccess ? 'hideToolbar' : ''}" disabled="#{!login.editAccess}" ... />

CSS

.hideToolbar .ui-editor-toolbar {
   display: none;
}
于 2015-10-16T11:40:19.747 に答える