<a:form>
    <h3 style="margin-top:0">Basic</h3>
    <a:textEditor widgetVar="editor1" value="#{editorView.text}" height="300" style="margin-bottom:10px"/>

    <a:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="ui-icon-disk" />
    <a:commandButton value="Clear" type="button" onclick="PF('editor1').clear();" icon="ui-icon-close" />

    <h3 class="first">Custom Toolbar</h3>
    <a: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>
    </a:textEditor>

    <a:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="ui-icon-disk" />
    <a:commandButton value="Clear" type="button" onclick="PF('editor2').clear();" icon="ui-icon-close" />

    <a:dialog header="Content" widgetVar="dlg" showEffect="fade" hideEffect="fade">
        <a: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" />
        </a:outputPanel>
    </a:dialog>
</a:form>