代码编辑器CodeMirror使用总结-配置理解说明

本文的选项是根据官网的配置环境进行的理解，有些选项没有使用到和没有理解的就没做说明，有理解不对的欢迎指出来，对没有说明的也欢迎用过的友友给出自己的理解

常用选项配置

value

编辑器的初始值 - [string | CodeMirror.Doc]

// formTextArea 方法初始化编辑器时，value被textarea的值覆盖掉了
CodeMirror.fromTextArea(document.getElementById('textarea'), {
  value: 'function abc(){}',
})

//  CodeMirror.Doc(text: string, mode: Object, firstLineNumber: ?number, lineSeparator: ?string)
CodeMirror(document.getElementById('editor'), {
  value: CodeMirror.Doc('function test(){}')
})

mode

编辑器语言的模式 - [string | object]

CodeMirror(document.getElementById('editor'), {
  value: 'function test(){}',
  // 需要引入mode目录下的javascript模式文件；也可以是自定义的mode名称
  // {name: "javascript", json: true} CodeMirror.modes CodeMirror.mimeModes
  mode: 'javascript',
})

lineSeparator

换行分隔符 - [string | null]

CodeMirror(document.getElementById('editor'), {
  value: 'function test(){a}',
  mode: 'javascript',
  // 设置换行分隔符，null的时候为默认的 \n
  lineSeparator: 'a',
})

theme

编辑器主题 - [string]

CodeMirror(document.getElementById('editor'), {
  value: 'function test(){\n}',
  mode: 'javascript',
  // 通过给编辑器容器添加约定的类名来达到设置主题的目的 cm-s-[theme]，见下图
  // 需要引入theme目录下对应的css文件，否则主题无对应的样式文件
  // 也可以自定义主题样式文件
  // 可以设置多个主题，eg theme:'night foo', 对应赋予的类名为 cm-s-night cm-s-foo
  theme: 'night',
})

indentUnit

编辑器中缩进的大小 - [integer]

CodeMirror(document.getElementById('editor'), {
  value: 'function test(){\n}',
  mode: 'javascript',
  // 代码块中默认的缩进单位-几个空格，效果见下图
  indentUnit: 4,
})

smartIndent

是否使用mode提供的上下文的缩进 - [boolean]

CodeMirror(document.getElementById('editor'), {
  value: 'function test(){function test(){\n}}',
  mode: 'javascript',
  // 默认为true，设置为false，换行的时候上下文的缩进没有，从该行的首位开始
  smartIndent: false,
})

smartIndent: false

smartIndent: true

tabSize

tab字符的大小 - [integer]

CodeMirror(document.getElementById('editor'), {
  value: 'function test(){function test(){\n}}',
  mode: 'javascript',
  // 默认为4，相当于4个空格的宽度
  tabSize: 4,
})

indentWithTabs

缩进的时候，是否把前面的N*tab大小的空间转化为N个tab字符，默认为false - [boolean]

indentWithTabs: true

indentWithTabs: false

electricChars

语言模式提供缩进的前提下，当输入的会引起缩进变化的时候，是否重新调整当前行的缩进，默认为true - [boolean]

electricChars: true

electricChars: false

specialChars

specialCharPlaceholder

direction

rtlMoveVisually

keyMap

配置使用的键映射，默认为codemirror.js中定义的唯一的一个键映射-default - [string]

extraKeys

给编辑器绑定keyMap中定义的额外的键，为null或者有效的键值对{key: value} - [object]

configureMouse

允许您配置鼠标选择和拖动的行为 - [fn(cm: CodeMirror, repeat: "single" | "double" | "triple", event: Event) → Object]

lineWrapping

是否自动换行 - [boolean]

// false  - 默认，不自动换行
// true   - 自动换行

lineNumbers

编辑器左侧是否显示行号 - [boolean]

// true   - 默认，显示
// false  - 不显示

firstLineNumber

首行行号的设定，默认为1 - [integer]

// 如果设定为2，则左侧行号为2,3,4,5...

lineNumberFormatter

左侧行号格式化方法 - [function(line: integer) → string]

CodeMirror(document.getElementById('editor'), {
  value: 'function test(){function test(){\n}}',
  // 左侧行号为2,4,6...
  lineNumberFormatter: (line) => line * 2,
})

gutters

fixedGutter

scrollbarStyle

滚动条样式 - [string]

// 默认native，原生的滚动条样式
// null，不显示滚动条
// Addons 可以增加滚动条模型

coverGutterNextToScrollbar

inputStyle

处理输入和焦点的方式 - [string]

// 输入模式有两种: textarea | contenteditable
// 移动浏览器默认为 contenteditable , 桌面浏览器默认为 textarea

readOnly

编辑器是否只读 - [boolean | string]

// false      - 默认，可编辑
// true       - 只读，但是可显示光标，可以获取焦点
// nocursor   - 只读，不显示光标，不可获取焦点

screenReaderLabel

showCursorWhenSelecting

选择内容的时候是否显示光标 - [boolean]

// false  - 默认，不显示
// true   - 显示光标

lineWiseCopyCut

当没有选择内容时，进行复制或剪切操作，是否复制或剪切当前光标所在的整行内容 - [boolean]

// true   - 默认，复制或剪切整行. 注意此时会带上换行符
// false  - 不进行复制或剪切

pasteLinesPerSelection

selectionsMayTouch

undoDepth

编辑器存储的最大撤销级别数, 这包括选择更改事件。默认为200。 - [integer]

// 输入、删除、选择更改操作多次之后，会把这些操作记录在history中，可以来进行撤销操
// 而存储的最大次数就是该选项来设定的

historyEventDelay

输入或删除的时候，停顿一定时间后，会被认定为下一次操作。默认1250 - [integer]

// 如果输入间隔超过 historyEventDelay 后，则被认为是两次输入。单位毫秒

tabindex

要分配给编辑器的标签索引 - [integer]

autofocus

初始化的时候是否自动获取焦点 - [boolean]

// false  - 默认, 不获取焦点
// true   - 获取焦点

phrases

下面是一些特殊场景才会用到的选项配置

dragDrop

是否启动拖拽，默认启用true - [boolean]

dragDrop: true-默认

allowDropFileTypes

允许可以向编辑器拖入的文件MIME类型 - [array<string>]

// allowDropFileTypes: ['text/html'], 可以向编辑器中拖入html文件
// 但是此时 dragDrop 不能为false，否则该项不起作用

cursorBlinkRate

光标闪烁的半周期时长-毫秒，默认为530ms - [number]

// > 0时，光标闪烁一周时间为该时间的两倍
// = 0时，光标停止闪烁
// < 0时，光标不显示

cursorScrollMargin

在可滚动的文档中，当接近可见视图的顶部或底部时，始终保持在光标上方和下方的额外空间大小。默认值为0。 - [number]

cursorScrollMargin: 20

cursorHeight

光标的高度，默认为1-代码一行的高度 - [number]

// 根据需要可调整，如果设置0.5，则高度为代码行高的0.5倍
// 光标默认显示从当前行顶部开始显示

singleCursorHeightPerLine

true-将保持整个行(或换行部分)的光标高度不变。false-游标的高度基于相邻引用字符的高度。 - [boolean]

resetSelectionOnContextMenu

控制当在当前选择的外部单击打开上下文菜单时，是否将光标移动到单击的点。默认值为true。 - [boolean]

workTime

高亮伪线程的工作时间，单位ms - [number]

workDelay

高亮伪线程的间歇时间，单位ms - [number]

pollInterval

指示CodeMirror应该以多快的速度轮询其输入文本区域的更改(当聚焦时)。大多数输入都是由事件捕获的，但是有些东西，比如某些浏览器上的IME输入，并没有生成允许codemmirror正确检测它的事件。因此，它来检测。默认值为100ms - [number]

flattenSpans

默认情况下，如果相邻的标记具有相同的类，CodeMirror将把它们组合成单个span。这将生成更简单的DOM树，从而性能更好。对于某些类型的样式(如圆角)，这将改变文档的外观。您可以将此选项设置为false以禁用此行为。 - [boolean]

addModeClass

当启用=true(默认关闭=false)时，一个额外的CSS类将被添加到每个令牌，表明产生它的(内部)模式，前缀为“cm-m-”。例如，来自XML模式的令牌将获得cm-m-xml类。 - [boolean]

maxHighlightLength

单行高亮显示的内容长度，默认为10000 - [number]

// 超过部分按照纯文本显示
// Infinity - 无限制，等于关闭了该设置

maxHighlightLength: 100

viewportMargin

指定当前滚动到视图中的文档部分的上方和下方呈现的行数。默认为10 - [integer]

// 有点类似于虚拟滚动显示
// Infinity - 无限制，始终显示全部内容，但是数据量大的时候会造成页面卡顿

spellcheck

指定是否对输入启用拼写检查。 - [boolean]

autocorrect

指定是否对输入启用自动更正。 - [boolean]

autocapitalize

指定是否对输入启用自动大小写。 - [boolean]