Text Editor

<div class="card">
    <h:form>
        <h5 class="mt-0">Basic</h5>
        <p:textEditor widgetVar="editor1" value="#{editorView.text}" height="300px"  />

        <h3 class="first">Custom Toolbar</h3>
        <p:textEditor widgetVar="editor2" value="#{editorView.text2}" height="300px" placeholder="Enter your content" required="true">
            <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="Save" update="@form" icon="pi pi-check"/>
    </h:form>
</div>