arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
SunEditor
Lightweight, flexible, customizable WYSIWYG text editor.
Source

<p:growl id="growl" keepAlive="true">
        <p:autoUpdate/>
    </p:growl>

    <h:panelGrid columns="6" id="pnlDetails" styleClass="p-4" >
        <p:outputLabel value="Mode:" for="@next" styleClass="mr-2"/>
        <p:selectOneMenu id="cboMode" value="#{basicSunEditorController.mode}" styleClass="w-12rem mr-2"
                         required="true">
            <f:selectItems value="#{basicSunEditorController.modes}"/>
            <p:ajax update="sunEditor"/>
        </p:selectOneMenu>

        <p:outputLabel value="Locale:" for="@next" styleClass="mr-2"/>
        <p:selectOneMenu id="cboLocale" value="#{basicSunEditorController.language}" styleClass="w-12rem mr-2"
                         required="true">
            <f:selectItems value="#{basicSunEditorController.languages}"/>
            <p:ajax update="sunEditor"/>
        </p:selectOneMenu>

        <p:outputLabel value="RTL:" for="@next" styleClass="mr-2"/>
        <p:selectBooleanCheckbox id="chkRtl" value="#{basicSunEditorController.rtl}" styleClass="mr-2">
            <p:ajax update="sunEditor"/>
        </p:selectBooleanCheckbox>
    </h:panelGrid>

    <pe:sunEditor id="sunEditor" widgetVar="sunEditor" value="#{basicSunEditorController.html}"
                  mode="#{basicSunEditorController.mode}" dir="#{basicSunEditorController.rtl ? 'rtl' : 'ltr'}"
                  locale="#{basicSunEditorController.language}"
                  toolbar="[['font','fontSize','formatBlock'],['paragraphStyle','blockquote'], ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'removeFormat'],
                  '/'
                  ,['fontColor', 'hiliteColor', 'outdent', 'indent', 'align', 'horizontalRule', 'list', 'table'],
                   ['link', 'image', 'audio', 'video', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save']]">
        <p:ajax event="paste" listener="#{basicSunEditorController.onPaste}"/>
        <p:ajax event="copy" listener="#{basicSunEditorController.onCopy}"/>
        <p:ajax event="cut" listener="#{basicSunEditorController.onCut}"/>
        <p:ajax event="drop" listener="#{basicSunEditorController.onDrop}"/>
        <p:ajax event="save" listener="#{basicSunEditorController.onSave}" update="@this"/>
        <f:attribute name="widgetPostConstruct" value="widget.editor.onPaste = function (e, cleanData, maxCharCount) {console.log('onpaste event detected!'); };" />
    </pe:sunEditor>
            
Components and more
Documentation pe:
Attributes (move mouse over the names to see data types)
Name Description
No attributes available for this component.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 15.0.13,PrimeFaces Extensions: 15.0.14-SNAPSHOT,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),Build time: 2026-02-23 00:32