Theme
CodeMirror
CodeMirror also provides support for JS code completion (Ctrl-Space). This can be activated via extraKeys attribute.
Source

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

<pe:codeMirror id="codeMirror" mode="#{codeMirrorController.mode}"
    theme="eclipse" value="#{codeMirrorController.content}" lineNumbers="true"
    extraKeys="{ 'Ctrl-Space': function(cm) {CodeMirror.showHint(cm, CodeMirror.hint.javascriptHint);}}" />

<p:commandButton actionListener="#{codeMirrorController.changeMode}" update="codeMirror"
                 value="Change mode with AJAX" style="margin-top:10px;"/>
            
Components and more
Documentation pe:codeMirror
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.
onblur Client side callback to execute when input element loses focus.
onchange Client side callback to execute when input element loses focus and its value has been modified since gaining focus.
onclick Client side callback to execute when input element is clicked.
ondblclick Client side callback to execute when input element is double clicked.
onfocus Client side callback to execute when input element receives focus.
onkeydown Client side callback to execute when a key is pressed down over input element.
onkeypress Client side callback to execute when a key is pressed and released over input element.
onkeyup Client side callback to execute when a key is released over input element.
onmousedown Client side callback to execute when a pointer input element is pressed down over input element.
onmousemove Client side callback to execute when a pointer input element is moved within input element.
onmouseout Client side callback to execute when a pointer input element is moved away from input element.
onmouseover Client side callback to execute when a pointer input element is moved onto input element.
onmouseup Client side callback to execute when a pointer input element is released over input element.
onwheel Client side callback to execute when the mouse wheel rolls up or down over an element.
onselect Client side callback to execute when text within input element is selected by user.
oncut Client side callback to execute when the user copies the content of an element.
oncopy Client side callback to execute when the user cuts the content of an element.
onpaste Client side callback to execute when the user pastes some content in an element.
oninput Client side callback to execute when an element gets user input.
oncontextmenu Client side callback to execute when a context menu is triggered.
oninvalid Client side callback to execute when an element is invalid.
onreset Client side callback to execute when the Reset button in a form is clicked.
onsearch Client side callback to execute when the user writes something in a search field.
ondrag Client side callback to execute when an element is dragged.
ondragend Client side callback to execute at the end of a drag operation.
ondragenter Client side callback to execute when an element has been dragged to a valid drop target.
ondragleave Client side callback to execute when an element leaves a valid drop target.
ondragover Client side callback to execute when an element is being dragged over a valid drop target.
ondragstart Client side callback to execute at the start of a drag operation.
ondrop Client side callback to execute when dragged element is being dropped.
onscroll Client side callback to execute when an element's scrollbar is being scrolled.
completeMethod Method providing suggestions.
theme The theme to style the editor with.
mode The mode to use. When not given, this will default to the first mode that was loaded. It may be a string, which either simply names the mode or is a MIME type associated with the mode. Alternatively, it may be an object containing configuration options for the mode, with a name property that names the mode (for example {name: "javascript", json: true}).
indentUnit How many spaces a block (whatever that means in the edited language) should be indented. The default is 2.
smartIndent Whether to use the context-sensitive indentation that the mode provides (or just indent the same as the line before). Defaults to true.
tabSize The width of a tab character. Defaults to 4.
electricChars Configures whether the editor should re-indent the current line when a character is typed that might change its proper indentation (only works if the mode supports indentation). Default is true.
keyMap Configures the keymap to use. The default is "default", which is the only keymap defined in codemirror.js itself. Extra keymaps are found in the keymap directory.
lineWrapping Whether CodeMirror should scroll or wrap for long lines. Defaults to false (scroll).
lineNumbers Whether to show line numbers to the left of the editor.
firstLineNumber At which number to start counting lines. Default is 1.
gutter Can be used to force a 'gutter' (empty space on the left of the editor) to be shown even when no line numbers are active. This is useful for setting markers.
fixedGutter When enabled (off by default), this will make the gutter stay visible when the document is scrolled horizontally.
readonly This disables editing of the editor content by the user. If the special value "nocursor" is given (instead of simply true), focusing of the editor is also disallowed.
matchBrackets Determines whether brackets are matched whenever the cursor is moved next to a bracket.
workTime Highlighting is done by a pseudo background-thread that will work for workTime milliseconds, and then use timeout to sleep for workDelay milliseconds. The defaults are 200 and 300, you can change these options to make the highlighting more or less aggressive.
workDelay Highlighting is done by a pseudo background-thread that will work for workTime milliseconds, and then use timeout to sleep for workDelay milliseconds. The defaults are 200 and 300, you can change these options to make the highlighting more or less aggressive.
pollInterval Indicates how quickly CodeMirror should poll its input textarea for changes. Most input is captured by events, but some things, like IME input on some browsers, doesn't generate events that allow CodeMirror to properly detect it. Thus, it polls. Default is 100 milliseconds.
undoDepth The maximum number of undo levels that the editor stores. Defaults to 40.
tabindex The tab index to assign to the editor. If not given, no tab index will be assigned.
label A display name for this component.
inputmode HTML5 inputmode attribute for hinting at the type of data this control has for touch devices to display appropriate virtual keyboard.
extraKeys Can be used to specify extra keybindings for the editor. When given, should be an object with property names like Ctrl-A, Home, and Ctrl-Alt-Left.
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.
process Component(s) to process partially instead of whole view.
onstart Javascript handler to execute before ajax request is begins.
oncomplete Javascript handler to execute when ajax request is completed.
onerror Javascript handler to execute when ajax request fails.
onsuccess Javascript handler to execute when ajax request succeeds.
global Global ajax requests are listened by ajaxStatus component, setting global to false will not trigger ajaxStatus. Default value: true.
async When set to true, ajax requests are not queued. Default value: false.
escape Defines if the content of the component should be escaped or not.
escapeSuggestions Defines if the suggestions should be escaped or not.
required Marks component as required.
requiredMessage Message to display when required field validation fails.
validator A method expression referring to a method validationg the input.
valueChangeListener A method binding expression referring to a method for handling a valuchangeevent.
Events (move mouse over the names to see classes)
Name Description
changefired every time the content of the editor is changed
highlightCompletefired whenever the editor's content has been fully highlighted
focusfired when the editor gets focus
blurfired when the editor loses focus
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 10.0.0,PrimeFaces Extensions: 10.0.5,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2021-08-28 16:46
occured!