Editor is an input component with rich text editing features.
Documentation<h:form> <h3 style="margin-top:0">Basic</h3> <p:textEditor widgetVar="editor1" value="#{editorView.text}" height="300" style="margin-bottom:10px"/> <p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="pi pi-save" /> <p:commandButton value="Clear" type="button" onclick="PF('editor1').clear();" icon="pi pi-times" /> <h3 class="first">Custom Toolbar</h3> <p:textEditor widgetVar="editor2" value="#{editorView.text2}" height="300" style="margin-bottom:10px" placeholder="Enter your content"> <f:facet name="toolbar"> <span class="ql-formats"> <button class="ql-bold"></button> <button class="ql-italic"></button> <button class="ql-underline"></button> <button class="ql-strike"></button> </span> <span class="ql-formats"> <select class="ql-font"></select> <select class="ql-size"></select> </span> </f:facet> </p:textEditor> <p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="pi pi-save" /> <p:commandButton value="Clear" type="button" onclick="PF('editor2').clear();" icon="pi pi-times" /> <p:dialog header="Content" widgetVar="dlg" showEffect="fade" hideEffect="fade"> <p:outputPanel id="display"> <h3 style="margin-top:0">Basic</h3> <h:outputText value="#{editorView.text}" escape="false" /> <h3>Custom</h3> <h:outputText value="#{editorView.text2}" escape="false" /> </p:outputPanel> </p:dialog> </h:form>
@Named @RequestScoped public class EditorView { private String text; private String text2; public String getText() { return text; } public void setText(String text) { this.text = text; } public String getText2() { return text2; } public void setText2(String text2) { this.text2 = text2; } }