Text Editor - Since v6.0.6
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;
}
}
