Which JSF component to display a text area in non editing mode?

Question

I would like to display a text area which is used in two modes :

• A modification mode, using p:editor
• A visualization mode, where only text area is visible.

Which component would be the best choice for this visualization mode ? I have tried with :

• p : editor : I don’t want the toolbar to be visible. It seems it is not possible to hide it.
• p:outputTextarea : html tags generated by p:editor are visible in the textarea
• h: outputText : rendering is a little different from that of p:editor and above all, as there is no vertical scroll bar, the text overflows its container.

I have also tried with p:outputTextarea for both editing and visualization modes, but I would be interessed in further tools available in p:editor.

Any idea ?

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

Answer 1

If you want to hide the toolbar of <p:editor> because a user don't have editing permissions you can simply use css.

Facelet

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

CSS

.hideToolbar .ui-editor-toolbar {
   display: none;
}

Answer 2

Oh, I had not seen the .ui-editor-toolbar class !

Otherwise, to avoid text overflow when using h:outputText :

.h-outputText{
display:block !important;
overflow-y: auto !important;
height: 400px !important;
} 

Thanks for all answers