arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
MonacoEditor
The Monaco widget provides forwards several events from the JavaScript API as AJAX behavior events for your convenience. You can use <p:ajax> to attach a server-side listener to the event, or the on[eventname] attributes to attach a client-side callback. In case you require more fine-tuned control or wish to listen to an event not supported by this widget, consider using Monaco editor's client-side API directly; possibly in combination with a <p:remoteCommand> or <pe:remoteCommand> if you need to invoke a client-side listener.

Supported events are:
  • blur
  • change
  • focus
  • initialized (after the Monaco editor was rendered)
  • keydown
  • keyup
  • mousedown
  • mousemove
  • mouseup
  • paste
Note that if you value performance, you should avoid adding server-side listeners for frequently occurring events such as mousemove etc. In this example, we display a growl message via PrimeFace's client-side JavaScript API in the onstart callback of the AJAX behavior and return false to cancel the AJAX request to the server; but you could call a server-side method here if you wanted.
Source

<p:growl id="growl" showDetail="true" showSummary="true" life="1000" widgetVar="growl" />

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

<h:panelGroup id="monacoEditorWrapper" layout="block" styleClass="monacoEditorBox">
    <pe:monacoEditor id="monacoEditor" widgetVar="monacoEditor"
        rendered="#{monacoEditorController.type eq 'inline'}"
        value="#{monacoEditorController.value}"
        editorOptions="#{monacoEditorController.editorOptions}"
        width="100%" height="400px"
        autoResize="true"
        onblur="console.log('blur')" onchange="console.log('change')"
        onfocus="console.log('focus')" oninitialized="console.log('initialized')" 
        onkeydown="console.log('keydown')" onkeyup="console.log('keyup')"
       	onmousedown="console.log('mousedown')" onmousemove="console.log('mousemove')"
       	onmouseup="console.log('mouseup')" onpaste="console.log('paste')"
    >
        <p:ajax event="initialized" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />

        <p:ajax event="blur" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="change" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="focus" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="keydown" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="keyup" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="mousedown" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="mousemove" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="mouseup" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="paste" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
    </pe:monacoEditor>

    <pe:monacoEditorFramed id="monacoEditorFramed" widgetVar="monacoEditorFramed"
        rendered="#{monacoEditorController.type eq 'framed'}"
        value="#{monacoEditorController.valueFramed}"
        editorOptions="#{monacoEditorController.editorOptionsFramed}"
        width="100%" height="400px"
        autoResize="true"
        onblur="console.log('blur')" onchange="console.log('change')"
        onfocus="console.log('focus')" oninitialized="console.log('initialized')" 
        onkeydown="console.log('keydown')" onkeyup="console.log('keyup')"
        onmousedown="console.log('mousedown')" onmousemove="console.log('mousemove')"
        onmouseup="console.log('mouseup')" onpaste="console.log('paste')"
    >
        <p:ajax event="initialized" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />

        <p:ajax event="blur" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="change" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="focus" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="keydown" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="keyup" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="mousedown" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="mousemove" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="mouseup" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
        <p:ajax event="paste" onstart="PF('growl').add({severity:'info',summary:'AJAX event',detail:cfg.event});return false;" />
    </pe:monacoEditorFramed>
</h:panelGroup>
            
Components and more
Documentation pe:monacoEditor
Attributes (move mouse over the names to see data types)
Name Description
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
extenderExtender script: JavaScript expression that evaluates to an extender instance.
idUnique identifier of the component in a namingContainer.Default is generated.
overflowWidgetsDomNodeSearch expression for a component; places overflow widgets inside an external DOM node.
renderedUnique identifier of the component in a namingContainer.Default is generated.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 16.0.0-SNAPSHOT,PrimeFaces Extensions: 16.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-03-13 11:37