代码编辑器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.mimeModesmode: 'javascript',
})

lineSeparator

换行分隔符 – [string | null]

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

lineSeparator

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-footheme: 'night',
})

theme

indentUnit

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

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

indentUnit

smartIndent

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

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

smartIndent: false

false

smartIndent: true

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

true

indentWithTabs: false

false

electricChars

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

electricChars: true

true

electricChars: false

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]

tabindex

autofocus

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

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

phrases

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

dragDrop

是否启动拖拽,默认启用true – [boolean]

dragDrop: true-默认

true

allowDropFileTypes

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

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

allowDropFileTypes

cursorBlinkRate

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

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

cursorScrollMargin

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

cursorScrollMargin: 20

cursorScrollMargin

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

maxHighlightLength

viewportMargin

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

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

spellcheck

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

autocorrect

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

autocapitalize

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

Published by

风君子

独自遨游何稽首 揭天掀地慰生平