Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
MonacoEditor
MonacoEditor is fully updateable via AJAX as you can see with the select options below. It also keeps its scroll position during an AJAX update.
Inline
Iframe
Source

<p:growl id="growl" showDetail="true" showSummary="true">
     <p:autoUpdate />
</p:growl>

<p:selectOneButton id="type" value="#{monacoEditorController.type}">
    <f:selectItem itemLabel="Inline" itemValue="inline" />
    <f:selectItem itemLabel="Iframe" itemValue="framed" />
    <p:ajax process="monacoEditorWrapper,basicOptionsWrapper" update="monacoEditorWrapper,basicOptionsWrapper" />
</p:selectOneButton>

<h:panelGroup id="basicOptionsWrapper"  layout="block">

    <h:panelGrid id="basicOptions" rendered="#{monacoEditorController.type eq 'inline'}"
        columns="14" style="margin-bottom:10px" cellpadding="5"
    >
        <p:outputLabel for="language" value="Code language: " />
        <p:selectOneMenu id="language" value="#{monacoEditorController.language}" filter="true">
            <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{monacoEditorController.languages}" />
            <p:ajax listener="#{monacoEditorController.onLanguageChange}" process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectOneMenu>
    
        <p:outputLabel for="theme" value="Theme: " />
        <p:selectOneMenu id="theme" value="#{monacoEditorController.theme}">
            <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{monacoEditorController.themes}" />
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectOneMenu>
    
        <p:outputLabel for="locale" value="Locale: " />
        <p:selectOneMenu id="locale" value="#{monacoEditorController.locale}" converter="omnifaces.SelectItemsConverter">
            <f:selectItem itemLabel="(Default)" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{monacoEditorController.locales}" var="locale"
                itemLabel="#{locale.displayName}" itemValue="#{locale}" />
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectOneMenu>

        <p:selectBooleanCheckbox id="required" value="#{monacoEditorController.required}">
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectBooleanCheckbox>
        <p:outputLabel for="required" value="Required" />

        <p:selectBooleanCheckbox id="disabled" value="#{monacoEditorController.disabled}">
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectBooleanCheckbox>
        <p:outputLabel for="disabled" value="Disabled" />

        <p:selectBooleanCheckbox id="readOnly" value="#{monacoEditorController.readOnly}">
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectBooleanCheckbox>
        <p:outputLabel for="readOnly" value="Read-only" />
    </h:panelGrid>
    
    <h:panelGrid id="basicOptionsFramed" rendered="#{monacoEditorController.type eq 'framed'}"
        columns="14" style="margin-bottom:10px" cellpadding="5"
    >
        <p:outputLabel for="languageFramed" value="Code language: " />
        <p:selectOneMenu id="languageFramed" value="#{monacoEditorController.languageFramed}" filter="true">
            <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{monacoEditorController.languages}" />
            <p:ajax listener="#{monacoEditorController.onLanguageChange}" process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectOneMenu>
    
        <p:outputLabel for="themeFramed" value="Theme: " />
        <p:selectOneMenu id="themeFramed" value="#{monacoEditorController.themeFramed}">
            <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{monacoEditorController.themes}" />
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectOneMenu>
    
        <p:outputLabel for="localeFramed" value="Locale: " />
        <p:selectOneMenu id="localeFramed" value="#{monacoEditorController.localeFramed}" converter="omnifaces.SelectItemsConverter">
            <f:selectItem itemLabel="(Default)" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{monacoEditorController.locales}" var="locale"
                itemLabel="#{locale.displayName}" itemValue="#{locale}" />
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectOneMenu>

        <p:selectBooleanCheckbox id="requiredFramed" value="#{monacoEditorController.requiredFramed}">
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectBooleanCheckbox>
        <p:outputLabel for="requiredFramed" value="Required" />

        <p:selectBooleanCheckbox id="disabledFramed" value="#{monacoEditorController.disabledFramed}">
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectBooleanCheckbox>
        <p:outputLabel for="disabledFramed" value="Disabled" />

        <p:selectBooleanCheckbox id="readOnlyFramed" value="#{monacoEditorController.readOnlyFramed}">
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectBooleanCheckbox>
        <p:outputLabel for="readOnlyFramed" value="Read-only" />
    </h:panelGrid>
</h:panelGroup>

<h:panelGroup id="monacoEditorWrapper" layout="block" styleClass="monacoEditorBox">

    <pe:monacoEditor id="monacoEditor" widgetVar="monacoEditor"
        rendered="#{monacoEditorController.type eq 'inline'}"
        value="#{monacoEditorController.value}"
        required="#{monacoEditorController.required}"
        disabled="#{monacoEditorController.disabled}"
        readonly="#{monacoEditorController.readOnly}"
        locale="#{monacoEditorController.locale}"
        placeholder="enter your code... (inline)"
        editorOptions="#{monacoEditorController.editorOptions}"
        width="100%" height="400px" autoResize="true" />

    <pe:monacoEditorFramed id="monacoEditorFramed" widgetVar="monacoEditorFramed"
        rendered="#{monacoEditorController.type eq 'framed'}"
        value="#{monacoEditorController.valueFramed}"
        required="#{monacoEditorController.requiredFramed}"
        disabled="#{monacoEditorController.disabledFramed}"
        readonly="#{monacoEditorController.readOnlyFramed}"
        locale="#{monacoEditorController.localeFramed}"
        placeholder="enter your code... (framed)"
        editorOptions="#{monacoEditorController.editorOptionsFramed}"
        width="100%" height="400px" autoResize="true" />

    <p:commandButton id="btnSubmit" value="Submit" icon="pi pi-save"
        rendered="#{monacoEditorController.type eq 'inline'}" 
        process="monacoEditor" update="monacoEditor"
        actionListener="#{monacoEditorController.submitContent}" />

    <p:commandButton id="btnSubmitFramed" value="Submit" icon="pi pi-save"
        rendered="#{monacoEditorController.type eq 'framed'}" 
        process="monacoEditorFramed" update="monacoEditorFramed"
        actionListener="#{monacoEditorController.submitContent}" />

</h:panelGroup>
            
Components and more
Documentation pe:monacoEditor
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.
style CSS style(s) to be applied when this component is rendered.
styleClass Space-separated list of CSS style class(es) to be applied when this element is rendered. This value is passed through as the "class" attribute to the generated markup.
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.
readonly Defines if the editor is readonly. This option makes the UI not editable, but still accepts values that are submitted (e.g. when the editor value was changed via JavaScript). Use disabled if submitted values should not be accepted.
disabled Defines if the editor is disabled. This option does not accept a value to be submitted and ensures the model values stays the same (server validation).
placeholder Sets a placeholder for the editor. If set, the placeholder is shown if the editor is empty.
tabindex The tab index to assign to the editor. If not given, no tab index will be assigned.
converter An EL expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. In case it's a static text, it must refer to a converter id.
required Marks component as required.
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 validating the input.
onfocus Client side callback when the editor area receives focus.
onblur Client side callback when the editor area loses focus.
onchange Client side callback when the editor content changes.
oninitialized Client side callback when the editor was rendered.
onpaste Client side callback when text was pasted into the editor.
onmousedown Client side callback when a mousedown event was triggered on the editor area.
onmousemove Client side callback when a mousemove event was triggered on the editor area.
onmouseup Client side callback when a mouseup event was triggered on the editor area.
onkeyup Client side callback when a keyup event was triggered on the editor area.
onkeydown Client side callback when a keydown event was triggered on the editor area.
onkeypress Client side callback when a keypress (onDidType) event was triggered on the editor area.
customThemes Allows you to register custom themes with the editor via Java. This must be a Map<String, org.primefaces.extensions.model.monacoeditor.EditorStandaloneTheme>. It maps between the name of the theme and the styling data for that theme. You can then specify the theme name for the theme option in the editorOptions.
locale Locale for the user interface. Can be either a java.util.Locale object or a string with the locale code. Built-in languages are "cs", "de", "en", "es", "fr", "it", "ja", "ko", "pl", "pt_BR", "ru", "tr", "zh_CN", and "zh_TW". To use a custom language or translation, you can specify a language file with custom translations via the option localeUrl.
localeUrl For custom language files. If given, this is used instead of the built-in language files. This URL must point to a JavaScript file that, when executed, adds the localization to window.MonacoEnvironment.Locale["LOCALE_CODE"], where LOCALE_CODE is the value you set for locale. See the language file the widget downloads (when locale is not set to English) for an example and all available messages that need to be translated.
extender

An extender object to further customize the monaco editor via JavaScript. This can be either:

  • unset, in which case no further customization is performed
  • or a JavaScript expression that evaluates to an extender object
The extender object may have one or more of the following optional properties:
  • beforeCreate(editorWidget, options). Called before the monaco editor is created. It is passed the current options object that would be used to initialize the monaco editor. If this callback does not return a value, the options are used as they were passed to the callback. The callback is allowed to modify the passed options object. If the callback returns an options object, that options object is used instead. If it returns a thenable/Promise, the monaco editor is created only once the Promise resolves (successfully). If the Promise resolves with an options object, that options object is used to create the editor. See IStandaloneEditorConstructionOptions for all editor options.
  • afterCreate(editorWidget). Called after the editor was created.
  • beforeDestroy(editorWidget). Called before the editor is destroyed, e.g. when updating a component via AJAX.
  • afterDestroy(editorWidget). Called after the editor is destroyed, e.g. when updating a component via AJAX. Note that editorWidget.getMonaco() now returns undefined.
  • createModel(editorWidget, options). Called when a model needs to retrieved or created. The options contain value (current value that should be set on the model by the extender), url (default URL that was determined for the model), language (requested code language), and editorOptions (monaco editor constructor options). Should return the model. When it returns nothing, the default mechanism for creating a model is used. Note that editorWidget.getMonaco() returns undefined as the monaco editor was not created yet.
  • createEditorOverrideServices(editorWidget, options). Called when the monaco editor is created. May return an object with services that should be overriden. See here on GitHub for details on the available services. The options are the editor constructor options that will be used to create the editor, they are readonly and must not be changed.
  • createWorker(editorWidget, moduleId, label). Called when a worker for additional language support needs to be created. By default, monaco editor ships with the workers for JSON, CSS, HTML, and TYPESCRIPT. The label is the name of the language, e.g. css or javascript. Must return the worker to be used for the given language. Note that editorWidget.getMonaco() returns undefined as the monaco editor was not created yet.
scheme The monaco editor requires a unique URI for an opened model (i.e. the code currently being edited). This is the scheme (protocol) for that URI. Defaults to inmemory.
directory The monaco editor requires a unique URI for an opened model (i.e. the code currently being edited). This is the directory (path) for that URI, with parts separated by slashes. If not given, it is taken from the client ID of this component.
basename The monaco editor requires a unique URI for an opened model (i.e. the code currently being edited). This is the basename for that URI, without the extension. If not given, default to 'file'.
extension The monaco editor requires a unique URI for an opened model (i.e. the code currently being edited). This is the extension for that URI, with or without the period. If not given, it is inferred from the (code) language.
width Width of the editor with CSS units, set as an inline style. For example 500px or 100%/code>. Set this to the empty string in case you want to size the editor via CSS.
height Height of the editor with CSS units, set as an inline style. For example 500px or 100%/code>. Set this to the empty string in case you want to size the editor via CSS.
editorOptions Options for the Monaco code editor. This is a simple wrapper around the JavaScript API, see IEditorConstructionOptions The code language can be set via the EditorOptions#setLanguage option.
autoResize If true, resizes the editor automatically when the iframe element changes its size. Please note that this makes uses of the new ResizeObserver API and works only in newer browers. This widget checks whether ResizeObserver API is available, and when it is not, no resizing is performed. To support resizing for older browsers, search for a ResizeObserver polyfill. If you know when the size of the editor conainer could have changed, you can resize the editor manually via PF("editorWidgetVar").layout()
overflowWidgetsDomNode A PrimeFaces search expression of a component. Places overflow widgets inside an external DOM node. Defaults to an internal DOM node when not given. May be useful when the editor is used inside an element obscured by other components. You can, for example, append the overflow widget to the body. Note 1: you probably also need to set fixedOverflowWidgets on the editor options for this to work. Note 2: For now, you either need to add the CSS class monaco-editor to the container to style the overflow widgets properly, or add the appropriate CSS yourself. Note 3: As of monaco-editor 0.27.0, this option has several issues with event handling, use at your own risk. This will most likely be fixed in a later version of monaco-editor.
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