Module: alfresco/forms/controls/CodeMirrorEditor

alfresco/forms/controls/CodeMirrorEditor

This is a form control that wraps a new instance of a Code Mirror editor (version 5.20.2) which allows user input to be syntax highlighted according to the configured editMode. The default editing mode is for XML but other modes are available (see the Code Mirror documentation for details). In addition to supporting all the standard configuration attributes for all form controls it is also possible to configure the [height]editMode and [width]editMode of the editor.
Author:
  • Dave Draper
Copyright:
  • Copyright (C) 2005-2020 Alfresco Software Limited
License:
Source:

Example

Sample configuration changing the default mode:

{
  name: "alfresco/forms/controls/CodeMirrorEditor",
  config: {
    label: "Enter script",
    description: "Add your JavaScript code here",
    name: "js",
    editMode: "javascript"
  }
}

Extends

Members

cssRequirements :Array

An array of the CSS files to use with this widget.
Type:
  • Array
Source:

editMode :string

This is the editor mode for the embedded CodeMirror editor. By default it is "xml". This will control the syntax highlighting.
Type:
  • string
Default Value:
  • "xml"
Source:

height :number

The height of the editor (in pixels).
Type:
  • number
Default Value:
  • 300
Source:

isPromisedWidget :boolean

Indicates that the call to createFormControl is going to return a "promise" rather than an actual widget because it needs to require the additional AMD resources first.
Type:
  • boolean
Default Value:
  • true
Source:

width :number

The width of the editor (in pixels).
Type:
  • number
Default Value:
  • 600
Source:

Methods

createFormControl()

Instantiates a new JSON editor, places it in the template DOM and setups the change events. The ACE module sneakily overwrites the "require" variable which will prevent subsequent calls to the Dojo require from working, therefore it's necessary to keep a reference to the original function and then undo the damage once ACE has been loaded... Although we could have included these in the modules "define" statement and have them preloaded into the Dojo cache would break the page as soon as the ACE module is processed :(
Source:

getValue() → {string}

Overrides the inherited function to call the "getValue" function on the editor. This returns the JSON text rather than a JavaScript object.
Source:
Returns:
The JSON value entered into the editor
Type
string

getWidgetConfig()

Source:

onEditorChange()

A callback handler that is hitched to change events in the instantiation of the JSON editor.
Source:

onResizeEvent()

This is the callback function for resize events relating to the DOM element of this widget. It's primary use is to call the CodeMirror refresh function and has been added to handle the scenario where an editor is included in an AlfDialog. The AlfDialog publishes a resize event when it is first opened and this can be used to ensure that the editor is rendered correctly (because otherwise it doesn't!)
Source:

placeWidget()

Overrides the inherited function primarily to prevent an unnecessary warning being logged. But additionally this calls the refresh function on the Code Mirror editor to ensure it is rendered correctly.
Source:

processValidationRules() → {boolean}

Extends the default function to see if the editor any errors. Currently the error checking is not actually implemented.
Source:
Returns:
True if the editor content is valid and false otherwise.
Type
boolean

setupChangeEvents()

Overrides to prevent any action from occurring.
Source:

setupEditor()

Creates and configures the CodeMirror editor.
Source: