• Settings
    • Locale
    • Change the locale of the datepicker, schedule and client side validation messages.

      Language
      English
      English
      English
      French
      German
      German
      German
      Italian
      Korean
      Spanish
      Catalan
      Dutch
      Portuguese
      Portuguese
      Arabic
      Arabic
      Bulgarian
      Bangla
      Bosnian
      Czech
      Greek
      Estonian
      Persian
      Finnish
      Danish
      Hindi
      Indonesian
      Icelandic
      Croatian
      Japanese
      Hungarian
      Hebrew
      Georgian
      Central Kurdish
      Khmer
      Kyrgyz
      Kazakh
      Lithuanian
      Latvian
      Malay
      Norwegian
      Polish
      Romanian
      Russian
      Slovak
      Slovenian
      Serbian
      Serbian
      Swedish
      Thai
      Turkish
      Ukrainian
      Uzbek
      Vietnamese
      Chinese
      Chinese
  • Resources

CodeMirror

CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content: computer programs, HTML markup and similar. If a mode has been written for the language you are editing, the code is coloured and the editor helps with indentation. Based on CodeMirror.js by Marijn Haverbeke.

CodeMirror Tag Documentation

CodeMirror to allow syntax highlighting and auto-completion.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
accesskey String false Access key to transfer focus to the input element.
allowBlocks boolean false true Whether to allow blocks to be included when secure=true and the HTML is sanitized.
allowFormatting boolean false true Whether to allow formatting to be included when secure=true and the HTML is sanitized.
allowImages boolean false true Whether to allow images to be included when secure=true and the HTML is sanitized.
allowLinks boolean false true Whether to allow links to be included when secure=true and the HTML is sanitized.
allowMedia boolean false true Whether to allow audio/video to be included when secure=true and the HTML is sanitized.
allowStyles boolean false true Whether to allow styles to be included when secure=true and the HTML is sanitized.
allowTables boolean false true Whether to allow tables to be included when secure=true and the HTML is sanitized.
ariaDescribedBy String false Identifies the element(s) that describe the object, enhancing accessibility.
async boolean false false When set to true, ajax requests are not queued. Default value: false.
cols int false 0
completeMethod MethodExpression false Method providing suggestions.
converter Converter false EL expression resolves to a converter instance or literal converter ID defining a component converter.
converterMessage String false Custom message to display when conversion fails.
dir String false ltr Direction indication for text that does not inherit directionality.
disabled boolean false false Specifies that an element should be disabled.
electricChars boolean false true 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).
escape boolean false true Defines if the content of the component should be escaped or not.
escapeSuggestions boolean false true Defines if the suggestions should be escaped or not.
extender String false The extender to use for the editor.
extraKeys String false 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.
firstLineNumber Integer false 1 At which number to start counting lines.
fixedGutter boolean false false When enabled (off by default), this will make the gutter stay visible when the document is scrolled horizontally.
global boolean false true Global ajax requests are listened by ajaxStatus component, setting global to false will not trigger ajaxStatus.
gutter boolean false false 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.
immediate boolean false false When set true, process validations logic is executed at apply request values phase for this component.
indentUnit Integer false How many spaces a block (whatever that means in the edited language) should be indented. The default is 2.
indentWithTabs boolean false true If Set false, indent using spaces instead of tabs.
inputmode String false Specifies the type of data expected in the input, aiding virtual keyboards.
keyMap String false 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.
label String false A localized user presentable name.
lang String false Specifies the language of the element's content.
lineNumbers boolean false false Whether to show line numbers to the left of the editor.
lineWrapping boolean false false Whether CodeMirror should scroll or wrap for long lines.
localValueSet boolean false false Indicates whether the local value of the component has been set.
matchBrackets boolean false false Determines whether brackets are matched whenever the cursor is moved next to a bracket.
maxlength int false Integer.MIN_VALUE Defines the maximum number of characters allowed in the input.
mode String false 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}).
onblur String false Fires when an element loses focus.
onchange String false Fires when the value of an element has been changed.
onclick String false Fires when a mouse click on the element.
oncomplete String false Javascript handler to execute when ajax request is completed.
oncontextmenu String false Script to execute when the context menu is triggered.
oncopy String false Script to execute when content is copied from the element.
oncut String false Script to execute when content is cut from the element.
ondblclick String false Fires when a mouse double-click on the element.
ondrag String false Script to execute when an element is dragged.
ondragend String false Script to execute at the end of a drag operation.
ondragenter String false Script to execute when a dragged element enters a valid drop target.
ondragleave String false Script to execute when a dragged element leaves a valid drop target.
ondragover String false Script to execute when a dragged element is over a valid drop target.
ondragstart String false Script to execute at the start of a drag operation.
ondrop String false Script to execute when a dragged element is dropped.
onerror String false Javascript handler to execute when ajax request fails.
onfocus String false Fires when an element gets focus.
oninput String false Script to execute when the element receives user input.
oninvalid String false Script to execute when the element's value is invalid.
onkeydown String false Fires when a user is pressing a key.
onkeypress String false Fires when a user presses a key.
onkeyup String false Fires when a user releases a key.
onmousedown String false Fires when a mouse button is pressed down on an element.
onmousemove String false Fires when the mouse pointer is moving while it is over an element.
onmouseout String false Fires when the mouse pointer moves out of an element.
onmouseover String false Fires when the mouse pointer moves onto an element.
onmouseup String false Fires when a mouse button is released over an element.
onpaste String false Script to execute when content is pasted into the element.
onreset String false Script to execute when the form is reset.
onscroll String false Script to execute when the element is scrolled.
onsearch String false Script to execute when a search is performed.
onselect String false Script to execute when text is selected.
onstart String false Javascript handler to execute before ajax request is begins.
onsuccess String false Javascript handler to execute when ajax request succeeds.
onwheel String false Script to execute when the mouse wheel is used.
placeholder String false Specifies a short hint describing the expected value of the input.
pollInterval Integer false 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 millis.
process String false Component(s) to process partially instead of whole view.
readonly boolean false false Specifies that an input field is read-only.
required boolean false false Marks component as required.
requiredMessage String false Custom message to display when the required validation fails.
role String false Defines the role of the element for accessibility purposes.
rows int false 0
secure boolean false true Secure the component with the HTML Sanitizer library on the classpath.
smartIndent boolean false true Whether to use the context-sensitive indentation that the mode provides (or just indent the same as the line before).
style String false Specifies an inline CSS style for an element.
styleClass String false Specifies one or more CSS class names for an element.
submittedValue Object false
tabSize Integer false The width of a tab character. Defaults to 4.
tabindex String false Specifies the tab order of an element.
theme String false The theme to style the editor with.
title String false Specifies extra information about an element (displayed as a tooltip).
toolbar String false The toolbar to use for the editor.
undoDepth Integer false The maximum number of undo levels that the editor stores. Defaults to 40.
valid boolean false true Indicates whether the input's value is valid.
validator Validator false A method expression referring to a method validating the input.
validatorMessage String false Custom message to display when validation fails.
value Object false Value of the component.
valueChangeListener ValueChangeListener false A method binding expression referring to a method for handling a valuchangeevent.
workDelay Integer false Highlighting is done by a pseudo background-thread that will work for workTime milliseconds, and then use timeout to sleep for workDelay milliseconds. Defaults are 200 and 300, you can change these options to make the highlighting more or less aggressive.
workTime Integer false Highlighting is done by a pseudo background-thread that will work for workTime milliseconds, and then use timeout to sleep for workDelay milliseconds. Defaults are 200 and 300, you can change these options to make the highlighting more or less aggressive.
Tag Documentation Widget Source
Basic Usage

CodeMirror is fully updateable via AJAX as you can see with the select menus below: change the theme, the mode or the keymap.

Code Completion

Set completeMethod to a server-side method that returns suggestions. Press Ctrl-Space in the editor to open the proposals; the mode can be changed with AJAX.

JS Code Completion

The JavaScript hint add-on of CodeMirror can be bound with extraKeys. Press Ctrl-Space in the editor to complete JavaScript code on the client.

Available modes

CodeMirror provides many languages for markup and themes for styling. The following modes are available:

  • apl
  • asciiarmor
  • asn.1
  • asterisk
  • brainfuck
  • clike
  • clojure
  • cmake
  • cobol
  • coffeescript
  • commonlisp
  • crystal
  • css
  • cypher
  • d
  • dart
  • diff
  • django
  • dtd
  • dylan
  • ebnf
  • ecl
  • eiffel
  • eml
  • erlang
  • fcl
  • fortran
  • freemarker
  • gas
  • gfm
  • gherkin
  • go
  • groovy
  • haml
  • haskell
  • haskell-literate
  • haxe
  • htmlembedded
  • htmlmixed
  • http
  • idl
  • javascript
  • jinja2
  • jsx
  • julia
  • lua
  • markdown
  • mathematica
  • mbox
  • mirc
  • mllike
  • modelica
  • mscgen
  • mumps
  • nginx
  • ntriples
  • octave
  • oz
  • pascal
  • pegjs
  • perl
  • php
  • pig
  • powershell
  • properties
  • protobuf
  • pug
  • puppet
  • python
  • q
  • r
  • rpm
  • rst
  • ruby
  • sass
  • scala
  • scheme
  • shell
  • sieve
  • slim
  • smalltalk
  • smarty
  • solr
  • soy
  • sparql
  • spreadsheet
  • sql
  • stex
  • stylus
  • swift
  • tcl
  • textile
  • tiddlywiki
  • tiki
  • toml
  • tornado
  • troff
  • ttcn
  • ttcn-cfg
  • turtle
  • twig
  • vb
  • vbscript
  • velocity
  • verilog
  • vhdl
  • vue
  • webidl
  • xml
  • xquery
  • yaml
  • yaml-frontmatter
  • z80

Usage


<script>
    // The CodeMirror theme is an option of the editor: the editors marked with cm-follow-scheme use a light or a
    // dark theme depending on the color scheme of the page (data-dark on html, set by the theme configurator).
    function followColorScheme() {
        var dark = document.documentElement.getAttribute('data-dark') === 'true';
        document.querySelectorAll('.cm-follow-scheme .CodeMirror').forEach(function (el) {
            el.CodeMirror.setOption('theme', dark ? 'blackboard' : 'eclipse');
        });
    }
    $(window).on('load', followColorScheme);
    $(document).on('pfAjaxComplete', followColorScheme);
    new MutationObserver(followColorScheme).observe(document.documentElement, {attributes: true, attributeFilter: ['data-dark']});
</script>

<div class="card">
    <h5>Basic Usage</h5>
    <p>CodeMirror is fully updateable via AJAX as you can see with the select menus below: change the theme, the mode or the keymap.</p>
    <h:form id="formBasicUsage">
        <p:messages id="messages" showSummary="true" showDetail="true"/>

        <pe:codeMirror id="codeMirror" mode="#{codeMirrorController.mode}" theme="#{codeMirrorController.theme}"
                       value="#{codeMirrorController.content}" keyMap="#{codeMirrorController.keymap}" lineNumbers="true"
                       matchBrackets="true"/>

        <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
            <p:outputLabel for="theme" value="Theme: "/>
            <p:selectOneMenu id="theme" value="#{codeMirrorController.theme}">
                <f:selectItem itemLabel="Select One" itemValue=""/>
                <f:selectItems value="#{codeMirrorController.themes}"/>
                <p:ajax update="codeMirror"/>
            </p:selectOneMenu>

            <p:outputLabel for="mode" value="Mode: "/>
            <p:selectOneMenu id="mode" value="#{codeMirrorController.mode}">
                <f:selectItem itemLabel="Select One" itemValue=""/>
                <f:selectItems value="#{codeMirrorController.modes}"/>
                <p:ajax update="codeMirror"/>
            </p:selectOneMenu>

            <p:outputLabel for="keymap" value="Keymap: "/>
            <p:selectOneMenu id="keymap" value="#{codeMirrorController.keymap}">
                <f:selectItem itemLabel="Select One" itemValue=""/>
                <f:selectItems value="#{codeMirrorController.keymaps}"/>
                <p:ajax update="codeMirror"/>
            </p:selectOneMenu>

            <p:commandButton id="btnSubmit" value="Submit" icon="pi pi-save" actionListener="#{codeMirrorController.submitContent()}"
                             update="messages"/>
        </h:panelGrid>
    </h:form>
</div>

<div class="card">
    <h5>Code Completion</h5>
    <p>
        Set <code>completeMethod</code> to a server-side method that returns suggestions. Press <i>Ctrl-Space</i> in the editor
        to open the proposals; the mode can be changed with AJAX.
    </p>
    <h:form id="formCodeCompletion" styleClass="cm-follow-scheme">
        <pe:codeMirror id="codeMirror" mode="#{codeMirrorController.mode}" widgetVar="codeMirrorCompletion"
                       theme="eclipse" value="#{codeMirrorController.content}" lineNumbers="true"
                       completeMethod="#{codeMirrorController.complete}"
                       extraKeys="{ 'Ctrl-Space': function(cm) { PF('codeMirrorCompletion').complete(); }}"/>

        <p:commandButton actionListener="#{codeMirrorController.changeMode}" update="codeMirror"
                         value="Change mode with AJAX" style="margin-top:10px;"/>
    </h:form>
</div>

<div class="card">
    <h5>JS Code Completion</h5>
    <p>
        The JavaScript hint add-on of CodeMirror can be bound with <code>extraKeys</code>. Press <i>Ctrl-Space</i> in the editor
        to complete JavaScript code on the client.
    </p>
    <h:form id="formJsCodeCompletion" styleClass="cm-follow-scheme">
        <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;"/>
    </h:form>
</div>