Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
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"/>
    </pe:sunEditor>
            
Components and more
Documentation pe:sunEditor
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a naming container.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar Name of the client side widget.
value Value of the component.
height Height of the editor with CSS units, set as an inline style. For example 500px or 100%/code>. Default value: auto
width Width of the editor with CSS units, set as an inline style. For example 500px or 100%/code>. Default value: 100%.
readonly Defines if the editor is readonly.
disabled Defines if the editor is disabled.
tabindex The tab index to assign to the editor. If not given, no tab index will be assigned.
required Marks component as required.
escape Defines if the content of the component should be escaped or not.
secure Secure the component with the HTML Sanitizer library on the classpath. Default is true.
allowFormatting Whether to allow formatting to be included when secure=true and the HTML is sanitized. Default true.
allowBlocks Whether to allow blocks to be included when secure=true and the HTML is sanitized. Default true.
allowStyles Whether to allow styles to be included when secure=true and the HTML is sanitized. Default true.
allowLinks Whether to allow links to be included when secure=true and the HTML is sanitized. Default true.
allowImages Whether to allow images to be included when secure=true and the HTML is sanitized. Default true.
allowMedia Whether to allow audio/video to be included when secure=true and the HTML is sanitized. Default true.
allowTables Whether to allow tables to be included when secure=true and the HTML is sanitized. Default true.
requiredMessage Message to display when required field validation fails.
converterMessage Message to display when conversion fails.
validatorMessage Message to display when validation fails.
validator A method expression referring to a method validationg the input.
style CSS style(s) to be applied when this component is rendered.
styleClass Style class of the main container element. Default value is null.
mode Editor mode : classic, inline, balloon, balloon-always. Default classic.
locale String or java.util.Locale representing user locale. Default is a locale specified in view root.
dir Defines text direction, valid values are "ltr" (default) and "rtl".
extender Name of javascript function to extend the options of the underlying SunEditor configuration.
toolbar JSON array of array using single quote that defines the toolbar.
Events (move mouse over the names to see classes)
Name Description
changeon change
scrollon scroll
mousedownon mouseDown
clickon click
inputon input
keydownon keyDown
keyupon keyUp
focuson focus
bluron blur
pasteon paste
copyon copy
cuton cut
dropon drop
saveon save
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 14.0.5,PrimeFaces Extensions: 14.0.5,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2024-09-10 21:01