I would like to display a text area which is used in two modes :
Which component would be the best choice for this visualization mode ? I have tried with :
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;
}
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;
}