Text Editor - Since v6.0.6 Editor is an input component with rich text editing features.

Basic

Custom Toolbar

Content

Basic

Custom

<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="ui-icon-disk" />
    <p:commandButton value="Clear" type="button" onclick="PF('editor1').clear();" icon="ui-icon-close" />

    <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="ui-icon-disk" />
    <p:commandButton value="Clear" type="button" onclick="PF('editor2').clear();" icon="ui-icon-close" />

    <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>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2-SNAPSHOT on Mojarra-2.3.2.