本文的选项是根据官网的配置环境进行的理解,有些选项没有使用到和没有理解的就没做说明,有理解不对的欢迎指出来,对没有说明的也欢迎用过的友友给出自己的理解
常用选项配置
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',
})
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',
})
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
]