Online Code Editor CODEMIRROR configuration instructions

Transferred from: http://www.hyjiacan.com/codemirror-config/

Codemirror is an online code editor that supports syntax highlighting. Official website: http://codemirror.net/

After the download, unzip the open folder, Lib is placed in the core library and core Css,mode is a variety of supported language syntax definitions, theme directory is supported by the theme style. Generally in development, adding a reference to the Lib and the reference under mode is enough.

Using the example

First, to refer to the Codemirror.js in the Lib directory, there is a codemirror.css file in the same directory

12	<scriptsrc="lib/codemirror.js"></script><link rel="stylesheet"href="/lib/codemirror.css">

Next is to refer to the mode directory in the editor to edit the language corresponding to the JS file, the following JS file as an example:

1	<scriptsrc="mode/javascript/javascript.js"></script>

The referenced file is used to support syntax highlighting for the corresponding language.

Then, call the script to create the editor:

1	varmyCodeMirror = CodeMirror(document.body);

The call here will add an editor to the body, because Javascript.js is referenced directly above , so the editor will highlight the JavaScript keyword.
To be advanced, add some elements to the editor, or you can implement them by passing in configuration parameters.

123	varmyCodeMirror = CodeMirror(document.body,{lineNumbers: true});

This adds the line number to the editor.

This is the simplest way to implement the editor, and then in the actual project, the body is not normally used as a container for the editor. And the most commonly used is the use of textarea.
To implement textarea as an editor that supports highlighting, Codemirror provides a very simple method:

1	< textarea id = name = ></ textarea >

12345

varmyTextarea = document.getElementById(‘editor‘);varCodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {    mode: "text/javascript",lineNumbers: true});

Configuration Instructions

When using Codemirror, you can configure the editor by passing the second parameter, either directly using Codemirror () or using Fromtextarea ().
Here's how to use it:

123	varmyCodeMirror = CodeMirror(el, {    // options...});

Or

123	varmyCodeMirror = CodeMirror.fromTextArea(el, {    // options...});

Options can use the parameters

Both the Codemirror function and its Fromtextarea method can use a configuration object as the second parameter.

value:string | Codemirror.doc
The initial value (text) of the editor, which can be a string or a Codemirror Document object (unlike an HTML document object).

mode:string | Object
The MIME associated with mode that is common or used in Codemirror, when this value is not set, defaults to the first loaded mode definition file. In general, this value is set using the associated MIME type, or you can use an object with the Name property as a value (for example: {name: "JavaScript", json:true}). You can get the defined mode and MIME by accessing Codemirror.modes and Codemirror.mimemodes.

Lineseparator:string|null
explicitly specifies the line separator (newline character) used by the editor. By default (value is null), the document is split by CRLF (as well as by a separate CR, LF), and the individual LF is used as a newline character (for example: GetValue) in all outputs. When a newline string is specified, the line is split only by the specified string.

Theme:string
Configures the theme style of the editor. To use a theme, you must ensure that the style named. Cm-s-[name] (name is the value of the set theme) is loaded. Of course, you can also load more than one theme style at a time, using the same methods as HTML and using classes, such as: Theme:foo bar, then you need Cm-s-foo Cm-s-bar both styles have been loaded.

Indentunit:integer
Indent units, the value is the number of spaces, the default is 2.

Smartindent:boolean
Auto indent, setting whether to automatically indent according to context (and the same indent as the previous line). The default is true.

Tabsize:integer
The width of the tab character, which defaults to 4.

Indentwithtabs:boolean
When indenting, do you want to replace the n*tab width space with n tab characters, and the default is False.

Electricchars:boolean
If the input may change the current indentation, whether to indent again, the default is true (only valid when mode supports indentation).

Specialchars:regexp
A regular expression that requires a special character to be replaced by a placeholder (placeholder). The most common non-printing characters. The default is:/[\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/.

Specialcharplaceholder:function (char) →element
This is a function that receives the character specified by the Specialchars option as a parameter, and this function produces a DOM node that displays the specified character. By default, a red dot (·) is displayed with a hint box with the preceding special character encoding.

Rtlmovevisually:boolean
Determines whether horizontal cursor movement through Right-to-left (Arabic, Hebrew) text is visual (pressing the left ARR OW moves the cursor left) or logical (pressing the left arrow moves to the next lower index in the string, which is visual ly right in right-to-left text). The default is false on Windows, and true on other platforms. (This paragraph is completely ignorant of the ghost)

Keymap:string
Configure shortcut keys. The default value is defaults, which is codemorrir.js internal definition. The other is in the key map directory.

Extrakeys:object
Bind the editor to a different shortcut key than the previous Keymap configuration.

Linewrapping:boolean
When long lines of text are wrap or scroll (scroll), the default is scrolling (scroll).

Linenumbers:boolean
Whether to display line numbers on the left side of the editor.

Firstlinenumber:integer
The number from which the line number starts counting, the default is 1.

Linenumberformatter:function (Line:integer) →string
Use a function to set the line number.

Gutters:array<string>
Used to add additional gutter (before the line number gutter or in place of the row number gutter). The value should be an array of CSS names, each of which defines the width (and optionally the background) used to draw the gutter background. In order to explicitly set the location of the line number gutter (the default is on the right of all other gutter), you can also include the Codemirror-linenumbers class. The class name is the key name (keys) to pass to the Setguttermarker.

Fixedgutter:boolean
Sets whether the gutter follows the editor content horizontally (false) or fixed to the left (true or default).

Scrollbarstyle:string
Sets the scroll bar. The default is "native", which displays the native scroll bar. The core library also provides a "null" style, which hides the scroll bar completely. Addons can set more scroll bar modes.

Covergutternexttoscrollbar:boolean
When Fixedgutter is enabled and a horizontal scroll bar is present, gutter is displayed by default on the leftmost side of the scroll bar, and when this is set to true, gutter is obscured by elements with codemirror-gutter-filler classes.
Inputstyle:string
Select how the Codemirror handles input and focus. The core library defines the textarea and contenteditable input modes. On the mobile browser, the default is Contenteditable, on the desktop browser, the default is textarea. Support for IMEs and screen readers is better in contenteditable mode.

Readonly:boolean|string
Whether the editor is read-only. If set to the preset value "Nocursor", the editing area will not have the focus in addition to setting read-only.

Showcursorwhenselecting:boolean
Whether the cursor is displayed when selected, False by default.

Linewisecopycut:boolean
When enabled, if no text is selected when copying or cutting, the entire line of the cursor is automatically manipulated.

Undodepth:integer
The maximum number of undo, which defaults to 200 (including the selection Change event).

Historyeventdelay:integer
The number of milliseconds before a history event is raised on input or delete.

Tabindex:integer
The TabIndex of the editor.

Autofocus:boolean
Whether the focus is automatically acquired at initialization time. The default is off. However, when you use textarea and do not explicitly specify a value, it is automatically set to true.

Low-level options

The following options are only available for some special cases.

Dragdrop:boolean
Whether to allow drag and drop, the default is true.

Allowdropfiletypes:array<string>
The default is null. When this entry is set, only the file types contained within this array are received and dragged into the editor. The file type is a mime name.

Cursorblinkrate:number
The interval at which the cursor flashes, in milliseconds. The default is 530. When set to 0 o'clock, the cursor flashes are disabled. A negative number hides the cursor.

Cursorscrollmargin:number
The distance between the cursor and the top and bottom when the cursor is near the visible area boundary. The default is 0.

Cursorheight:number
The cursor height. The default is 1, which means full line height. For some fonts, setting 0.85 will look better.

Resetselectiononcontextmenu:boolean
Sets whether to move the cursor to the point of click when the context menu is clicked outside the selection text. The default is true.

Worktime, Workdelay:number
Cheng Gaoliang worktime time by a fake background line, then use timeout to rest workdelay duration. The default is 200 and 300. (I have no idea what this feature is saying)

Pollinterval:number
Indicates the speed at which the Codemirror scrolls (writes data) to the corresponding textarea (when the focus is obtained). Most of the input is captured through events, but some input methods, such as IMEs, do not generate events on some browsers, so data scrolling is used. The default is 100 milliseconds.

Flattenspans:boolean
By default, Codemirror merges two spans using the same class into one. Disable this feature by setting this entry to False.

Addmodeclass:boolean
When enabled (disabled by default), additional CSS style classes starting with Cm-m are added for each tag that represents the mode that generated the token. For example, the markup generated by the XML mode will add the Cm-m-xml class.

Maxhighlightlength:number
When you need to highlight a long row, in order to maintain responsiveness, the editor will directly set the other rows to plain text (plain text) when certain locations are reached. The default is 10000, which can be set to infinity to turn off this feature.

Viewportmargin:integer
Specifies the number of rows to be rendered above and below the content currently scrolled into view. This affects the number of rows to update when scrolling. You should typically use the default value of 10. You can set a value of infinity to always render the entire document. Note: This setting affects performance when working with large documents.

Online Code Editor CODEMIRROR configuration instructions