Expand all

CodeMirror

Interface for the CodeMirror editor.

Example

mw.loader.using( [
  'ext.CodeMirror.v6',
  'ext.CodeMirror.v6.mode.mediawiki'
] ).then( ( require ) => {
  const CodeMirror = require( 'ext.CodeMirror.v6' );
  const mediawikiLang = require( 'ext.CodeMirror.v6.mode.mediawiki' );
  const cm = new CodeMirror( myTextarea );
  cm.initialize( [ cm.defaultExtensions, mediawikiLang() ] );
} );

Constructor

new CodeMirror(textarea) #

Instantiate a new CodeMirror instance.

Parameters:

Name Type Description
textarea HTMLTextAreaElement | jQuery | string

Textarea to add syntax highlighting to.
Source:

Properties

$textarea :jQuery #

The textarea that CodeMirror is bound to.

Type:

Source:

contentAttributesExtension :Extension #

This specifies which attributes get added to the .cm-content and .cm-editor elements. Subclasses are safe to override this method, but attributes here are considered vital.

Type:

Source:
See:

defaultExtensions :Extension|Array.<Extension> #

Default extensions used by CodeMirror. Extensions here should be applicable to all theoretical uses of CodeMirror in MediaWiki.

Type:

Source:
See:

editRecoveryHandler :function|null #

The edit recovery handler.

Type:

  • function | null
Source:

heightExtension :Extension #

This extension sets the height of the CodeMirror editor to match the textarea. Override this method to change the height of the editor.

Type:

Source:

phrasesExtension :Extension #

These are all potential messages used in a full-featured CodeMirror setup. We lump them all here and supply it as default extensions because it is only a small cost and we don't want localization to be overlooked by CodeMirror clients and subclasses.

Type:

Source:
See:

readOnly :boolean #

Whether the textarea is read-only.

Type:

  • boolean
Source:

specialCharsExtension :Extension #

We give a small subset of special characters a tooltip explaining what they are. The messages and for what characters are defined here. Any character that does not have a message will instead use CM6 defaults, which is the localization of 'codemirror-control-character' followed by the Unicode number.

Type:

Source:
See:

state :EditorState #

The editor state.

Type:

Source:

textSelection :CodeMirrorTextSelection #

jQuery.textSelection overrides for CodeMirror.

Type:

Source:

view :EditorView #

The editor user interface.

Type:

Source:

Methods

destroy() #

Destroy the CodeMirror instance and revert to the original textarea.

Source:

Fires:

initialize([extensions]) #

Setup CodeMirror and add it to the DOM. This will hide the original textarea.

Parameters:

Name Type Attributes Default Description
extensions Extension | Array.<Extension> optional
 this.defaultExtensions

Extensions to use.
Source:

Fires:

logUsage(data) #

Log usage of CodeMirror.

Parameters:

Name Type Description
data Object
Source:

setCodeMirrorPreference(prefValue) #

Save CodeMirror enabled preference.

Parameters:

Name Type Description
prefValue boolean

True, if CodeMirror should be enabled by default, otherwise false.
Source:

Events

'ext.CodeMirror.destroy'($textarea) #

Called just after CodeMirror is destroyed and the original textarea is restored.

Parameters:

Name Type Description
$textarea jQuery

The original textarea.
Source:

'ext.CodeMirror.initialize'($textarea) #

Called just before CodeMirror is initialized. This can be used to manipulate the DOM to suit CodeMirror (i.e. if you manipulate WikiEditor's DOM, you may need this).

Parameters:

Name Type Description
$textarea jQuery

The textarea that CodeMirror is bound to.
Source:

'ext.CodeMirror.ready'($view) #

Called just after CodeMirror is initialized.

Parameters:

Name Type Description
$view jQuery

The CodeMirror view.
Source: