CodeMirror 的大部分功能只能用过 API 来调用,因此需要编写代码(或者使用插件)来暴露给用户。
API 使用含有 line
和 ch
属性的对象来代表编辑器中的位置,两个属性的值都从 0 开始。
CodeMirror 能确保传递的任意坐标都在文档中,所以不用太担心坐标问题。
如果 ch
为 null
或未定义,会用该行的长度来代替。
该对象可能包含 sticky
属性,值为 "before"
或 "after"
,
表示该位置与前面的字符相关还是与后面的字符相关,比如,用来表示光标应在换行符前还是换行符后。
以 doc.
开头的函数既可通过 CodeMirror
的实例调用,也可通过 CodeMirror.Doc
的实例调用。
但是以 cm.
开头的函数只能通过 CodeMirror
的实例调用。
使用 CodeMirror(place: Element|fn(Element), ?option: object)
构造函数来创建编辑器实例。
place
:为 DOM 元素时,在该元素后创建;为函数时,通过该函数来放置编辑器。options
:是可选的配置对象。默认从 CodeMirror.defaults
中获取。注意:构造函数的 options
参数是可修改的,所以你不能共享该参数给其他实例。
参考另一种创建编辑器实例的方法:CodeMirror.fromTextArea
。
doc.getValue(?separator: string) → string
"\n"
)。doc.setValue(content: string)
doc.getRange(from: {line, ch}, to: {line, ch}, ?separator: string) → string
"\n"
)。doc.replaceRange(replacement: string, from: {line, ch}, to: {line, ch}, ?origin: string)
from
到 to
之间的正文,from
和 to
必须是 {line, ch}
对象,
省略 to
参数时,将字符串插入到 from
处。origin
时,该参数会传递给 "change"
事件,
并根据该参数的第一个字符来确定是否与上一个历史事件合并,详见选区的 origin 属性。doc.getLine(n: integer) → string
n
行的正文。doc.lineCount() → integer
doc.firstLine() → integer
doc.lastLine() → integer
doc.lineCount() - 1
,但如果是子视图,可能返回其他值。doc.getLineHandle(num: integer) → LineHandle
doc.getLineNumber(handle: LineHandle) → integer
null
)。doc.eachLine(f: (line: LineHandle))
doc.eachLine(start: integer, end: integer, f: (line: LineHandle))
start
到 end
之间的行,f
函数的参数是行句柄。getLineHandle
函数的效率更高。text
属性,为该行的正文字符串。doc.markClean()
"clean"
的,该状态会一直保持到下次编辑时,可用来判断正文是否需要保存。changeGeneration
不同,后者支持多个子系统在不互相干扰的情况下跟踪多个 "clean"
状态。doc.changeGeneration(?closeEvent: boolean) → integer
isClean
函数,用来判断从该次修改到现在,正文是否有修改。closeEvent
is true, the current history event will be ‘closed’,
meaning it can't be combined with further changes (rapid typing or deleting events are typically combined).doc.isClean(?generation: integer) → boolean
"clean"
的。markClean
函数到现在,正文是否有修改。changeGeneration
函数到现在,正文是否有修改。doc.getSelection(?lineSep: string) → string
lineSep
分割行。doc.getSelections(?lineSep: string) → array<string>
doc.replaceSelection(replacement: string, ?select: string)
select
"around"
:为替换后的正文创建新选区。"start"
:取消选区,把光标移动到选区开头处。doc.replaceSelections(replacements: array<string>, ?select: string)
select
参数与 replaceSelection
一致。doc.getCursor(?start: string) → {line, ch}
{line, ch}
对象。start
参数的值可以是 "from"
、"to"
、"head"
(默认,扩展选区的截止处)或 "anchor"
(扩展选区的起始处)。doc.listSelections() → array<{anchor, head}>
anchor
和 head
是 {line, ch}
对象。doc.somethingSelected() → boolean
doc.setCursor(pos: {line, ch}|number, ?ch: number, ?options: object)
{line, ch}
对象也可以使用两个单独的数字。options
参数参考 setSelection
。doc.setSelection(anchor: {line, ch}, ?head: {line, ch}, ?options: object)
anchor
和 head
参数的值是 {line, ch}
对象,head
默认与 anchor
一致。options
的值如下:
doc.setSelections(ranges: array<{anchor, head}>, ?primary: integer, ?options: object)
primary
用来指定主选区,不指定时该值时,当上一组选区的数量与本组选区的数量一致时,该值从上一组选区中继承,否则为本组的最后一个选区。options
参数参考 setSelection
。
doc.addSelection(anchor: {line, ch}, ?head: {line, ch})
doc.extendSelection(from: {line, ch}, ?to: {line, ch}, ?options: object)
to
可选,用来确定截止范围。options
参数参考 setSelection
。doc.extendSelections(heads: array<{line, ch}>, ?options: object)
extendSelection
。doc.extendSelectionsBy(f: function(range: {anchor, head}) → {line, ch}), ?options: object)
extendSelections
函数的返回值。doc.setExtending(value: boolean)
"extending"
状态,类似按下或弹起 Shift 键,extendSelection
函数依赖该状态。doc.getExtending() → boolean
"extending"
状态。cm.hasFocus() → boolean
cm.findPosH(start: {line, ch}, amount: integer, unit: string, visually: boolean) → {line, ch, ?hitSide: boolean}
start
:{line, ch}
对象。amount
:数字(可能为负数)。unit
:"char"
、"column"
或 "word"
。visually
:为true时,在从右往左书写的语言中,移动是相对的而不是绝对的。amount
个 unit
单位。hitSide
属性。cm.findPosV(start: {line, ch}, amount: integer, unit: string) → {line, ch, ?hitSide: boolean}
findPosH
类似,垂直移动。unit
可以是 "line"
或 "page"
。cm.findWordAt(pos: {line, ch}) → {anchor: {line, ch}, head: {line, ch}}
cm.setOption(option: string, value: any)
cm.getOption(option: string) → any
cm.addKeyMap(map: object, bottom: boolean)
extraKeys
冲突。extraKeys
和 keyMap
配置添加的按键表的优先级更高。bottom
参数用来设置为最低级(仅相对于通过该函数添加的按键表)。cm.removeKeyMap(map: object)
addKeyMap
函数添加的按键表。name
。cm.addOverlay(mode: string|object, ?options: object)
mode
参考 mode 配置和自定义 Mode
。options
支持以下配置:
opaque: bool
priority: number
cm.removeOverlay(mode: string|object)
mode
参考 addOverlay
。cm.on(type: string, func: (...args))
CodeMirror.on(object, type, func)
函数,为任意对象绑定处理函数。cm.off(type: string, func: (...args))
CodeMirror.off(object, type, func)
函数。每个编辑器实例只有一个 CodeMirror.Doc
对象。
文档对象由正文、选区、历史记录和 Mode 组成。
可以使用 CodeMirror.Doc(text: string, mode: Object, firstLineNumber: ?number, lineSeparator: ?string)
构造函数来创建文档对象,
后三个参数都是可选的,分别用来设置 Mode 、首行的行号(可大于 0)、行分隔符。
cm.getDoc() → Doc
doc.getEditor() → CodeMirror
null
。cm.swapDoc(doc: CodeMirror.Doc) → Doc
doc.copy(copyHistory: boolean) → Doc
copyHistory
为 true 时同时复制历史记录。不能通过编辑器实例调用该函数。doc.linkedDoc(options: object) → Doc
unlinkDoc
之前,两个对象是同步的。from: integer
to: integer
mode: string|object
doc.unlinkDoc(doc: CodeMirror.Doc)
doc.iterLinkedDocs(function: (doc: CodeMirror.Doc, sharedHist: boolean))
doc.undo()
doc.redo()
doc.undoSelection()
doc.redoSelection()
doc.historySize() → {undo: integer, redo: integer}
{undo, redo}
对象,代表可以撤销、重做的次数。doc.clearHistory()
doc.getHistory() → object
doc.setHistory(history: object)
getHistory
的返回值一致。getHistory
时不同,会将造成无法预知的后果。doc.markText(from: {line, ch}, to: {line, ch}, ?options: object) → TextMarker
from
和 to
是 {line, ch}
对象。options
参数可选,支持的配置如下:
className: string
inclusiveLeft: boolean
inclusiveRight: boolean
selectLeft: boolean
selectRight: boolean
atomic: boolean
selectLeft
和 selectRight
来控制光标能否在原子标记的左侧和右侧出现,
如果没有指定 selectLeft
(或 selectRight
),则使用 inclusiveLeft
(或 inclusiveRight
)来控制。collapsed: boolean
clearOnEnter: boolean
"clear"
事件。clearWhenEmpty: boolean
replacedWith: Element
handleMouseEvents: boolean
replacedWith
时,判断是否需要捕获 DOM 元素的点击和拖拽事件。readOnly: boolean
setValue
重置正文。addToHistory: boolean
startStyle: string
endStyle: string
css: string
"color: #fe3"
。attributes: object
class
和 style
属性。CodeMirror.TextMarker
),包含三个函数:
clear()
:删除标记。find()
:返回标记的起止坐标({from, to}
),标记被删除时返回 undefined
。changed()
:标记被修改时(如 replacedWith
),可以用该函数来刷新标记。doc.setBookmark(pos: {line, ch}, ?options: object) → TextMarker
find()
:返回书签的坐标。clear()
:删除书签。widget: Element
markText
函数的 replacedWith
选项)。insertLeft: boolean
shared: boolean
markText
函数的 shared 配置。handleMouseEvents: boolean
markText
函数的 handleMouseEvents 配置。doc.findMarks(from: {line, ch}, to: {line, ch}) → array<TextMarker>
doc.findMarksAt(pos: {line, ch}) → array<TextMarker>
doc.getAllMarks() → array<TextMarker>
doc.setGutterMarker(line: integer|LineHandle, gutterID: string, value: Element) → LineHandle
gutters
)设置值。null
时删除侧边栏,为 DOM 元素时出现在指定行的侧边栏处。doc.clearGutter(gutterID: string)
gutters
)。doc.addLineClass(line: integer|LineHandle, where: string, class: string) → LineHandle
line
可以是行号数字或行句柄。where
指定添加到哪个元素上,可以是:
"text"
:正文,选区的上层。"background"
:背景,选区的下层。"gutter"
:侧边栏。"wrap"
:表示折叠的元素。class
是样式名。doc.removeLineClass(line: integer|LineHandle, where: string, class: string) → LineHandle
line
可以是行号数字或行句柄。where
可以是 "text"
、"background"
或 "wrap"
(同 addLineClass
)。class
为空时删除所有样式,非空时删除指定样式。doc.lineInfo(line: integer|LineHandle) → object
{line, handle, text, gutterMarkers, textClass, bgClass, wrapClass, widgets}
对象,
gutterMarkers
包含侧边栏的 ID 与其对应的 DOM 元素,
widgets
数组包含该行的所有 行内小部件,
还有几个通过 addLineClass
函数添加的样式名。cm.addWidget(pos: {line, ch}, node: Element, scrollIntoView: boolean)
node
)到指定位置({line, ch}
)的右下方。scrollIntoView
为 true 时,编辑器会确保该元素在可视区域内。removeChild
函数)。doc.addLineWidget(line: integer|LineHandle, node: Element, ?options: object) → LineWidget
line
是行号数字或行句柄。
node
是代表行内小部件的 DOM 元素。
支持的 options
如下(全部默认为 flase):
coverGutter: boolean
noHScroll: boolean
above: boolean
handleMouseEvents: boolean
insertAt: integer
className: string
"CodeMirror-"
开头的样式名,有可能会影响小部件的外观。
该函数的返回值包含 line
属性,指向小部件的所在行,还有下面两个函数:
clear()
changed()
cm.setSize(width: number|string, height: number|string)
width
和 height
可以是数字(代表多少个像素)或 CSS 单位(如 "100%"
),
任意一项为 null
时表示该项不做修改。cm.scrollTo(x: number, y: number)
null
或 undefined
代表不滚动。cm.getScrollInfo() → {left, top, width, height, clientWidth, clientHeight}
{left, top, width, height, clientWidth, clientHeight}
对象包含当前的滚动位置,滚动区域的尺寸,可见区域的尺寸(不含滚动条)。cm.scrollIntoView(what: {line, ch}|{left, top, right, bottom}|{from, to}|null, ?margin: number)
what
null
:光标。{line, ch}
:坐标。{from, to}
:两个坐标或两个区域。margin
给指定区域增加上下间距(像素)。cm.cursorCoords(where: boolean|{line, ch}, mode: string) → {left, top, bottom}
where
{line, ch}
:获取该处的坐标。mode
"local"
:相对于文档左上角的坐标。"page"
或 空值:相对于页面左上角的坐标。"window"
:相对于窗口的当前可视区域(滚动的)左上角的坐标。cm.charCoords(pos: {line, ch}, ?mode: string) → {left, right, top, bottom}
cursorCoords
函数不同的是,该函数会返回字符的尺寸,而不是只有坐标。cm.coordsChar(object: {left, top}, ?mode: string) → {line, ch}
{left, top}
(比如鼠标事件的坐标)获取对应的 {line, ch}
对象。mode
是参考系,可以是 "window"
、"page"
(默认值)或 "local"
。cm.lineAtHeight(height: number, ?mode: string) → number
mode
同 coordsChar
。cm.heightAtLine(line: integer|LineHandle, ?mode: string, ?includeWidgets: bool) → number
mode
同(coordsChar
)。includeWidgets
为 true 时,并且该行有行内小部件时,从第一个行内小部件出计起。cm.defaultTextHeight() → number
cm.defaultCharWidth() → number
cm.getViewport() → {from: number, to: number}
viewportChange
事件。cm.refresh()
在开发语法提示功能之前,需要了解CodeMirror的mode知识。参考 Mode 章节。
doc.getMode() → object
getOption("mode")
不同的是,该函数返回mode的定义,而不是初始化过的不可修改的mode对象。cm.getModeAt(pos: {line, ch}) → object
getMode
相似,但是是具体的Mode,而不是混合Mode(如htmlmixed
)。cm.getTokenAt(pos: {line, ch}, ?precise: boolean) → object
{line, ch}
对象)之前的 Mode 的 token 信息。
返回值包含以下属性:
start
end
string
type
"keyword"
或 "comment"
(也可能是 null)。state
precise
为 true,token会根据最近的修改来确保准确。
为 false 或未指定时,会根据缓存的状态信息来获取 token 信息,
性能会更好,但如果最近进行了修改或高亮处理并未完成可能会不准确。
cm.getLineTokens(line: integer, ?precise: boolean) → array<{start, end, string, type, state}>
getTokenAt
类似,但会返回该行所有的 token 数组。
该函数比多次调用 getTokenAt
函数的性能更好,因为多次调用会多次格式化每个 token 前的剩余部分。cm.getTokenTypeAt(pos: {line, ch}) → string
getTokenAt
更轻量。
可能返回 null
无样式的 token,或一个字符串,包含多个由空格分隔的样式名。cm.getHelpers(pos: {line, ch}, type: string) → array<helper>
type
参数为辅助函数的命名空间(参考 registerHelper
),规定要查找的值。
当 Mode 拥有对应的 type
时,直接确定了要查找值(可以是字符串,或字符串数组)的键。
如果失败,则使用 Mode 的 helperType
属性,最后使用 Mode 的名称。fold
属性包含 "brace"
。
当加载 brace-fold
插件时,插件在 fold
命名空间定义了 brace
辅助函数。
然后 foldcode
插件就可以使用该折叠函数来折叠 JavaScript 代码。
cm.getHelper(pos: {line, ch}, type: string) → helper
getHelpers
。cm.getStateAfter(?line: integer, ?precise: boolean) → object
precise
在 getTokenAt()
中定义。cm.operation(func: () → any) → any
cm.startOperation()
cm.endOperation()
operation
函数。startOperation
来开始缓存,
并使用 endOperation
来结束缓存、更新 DOM。endOperation
,将不会更新 DOM。cm.indentLine(line: integer, ?dir: string|integer)
"smart"
):
"prev"
"smart"
"prev"
。"add"
"subtract"
<integer>
cm.toggleOverwrite(?value: boolean)
cm.isReadOnly() → boolean
doc.lineSeparator()
"\n"
。cm.execCommand(name: string)
doc.posFromIndex(index: integer) → {line, ch}
index
(从 0 开始)个字符的坐标({line, ch}
)。index
超出正文范围,则返回正文的起始坐标或截止坐标(取决于哪边溢出)。doc.indexFromPos(object: {line, ch}) → integer
posFromIndex
相反。cm.focus()
cm.phrase(text: string) → string
phrases
配置翻译给定字符串。cm.getInputField() → Element
inputStyle
配置。cm.getWrapperElement() → Element
cm.getScrollerElement() → Element
cm.getGutterElement() → Element
CodeMirror
的静态属性。
CodeMirror.version: string
"major.minor.patch"
),patch
为 0 时表示稳定版,其他为先行版。CodeMirror.fromTextArea(textArea: TextAreaElement, ?config: object)
cm.save()
cm.toTextArea()
fromTextArea
创建的实例时,如果没有销毁原 TextArea 的 Form 表单,
则必须调用 toTextArea
来删除编辑器实例,否则表单在提交时会造成内存泄漏。cm.getTextArea() → TextAreaElement
CodeMirror.defaults: object
CodeMirror.defineExtension(name: string, value: any)
CodeMirror.defineDocExtension(name: string, value: any)
Doc
的 API,同 defineExtension
。CodeMirror.defineOption(name: string, default: any, updateFunc: function)
setOption
函数修改配置时会调用 updateFunc
。CodeMirror.defineInitHook(func: function)
func
函数会在初始化后调用,参数为编辑器实例。CodeMirror.registerHelper(type: string, name: string, value: helper)
type
命名空间中创建一个名为 name
的帮助变量。CodeMirror
对象中创建名为 type
的属性,指向一个 Map 对象。
例如:执行 CodeMirror.registerHelper("hint", "foo", myFoo)
后,CodeMirror.hint.foo
的值为 myFoo
。CodeMirror.registerGlobalHelper(type: string, name: string, predicate: fn(mode, CodeMirror), value: helper)
registerHelper
,
but also registers this helper as 'global',
meaning that it will be included by getHelpers
whenever the given predicate
returns true when called with the local mode and editor.CodeMirror.Pos(line: integer, ?ch: integer, ?sticky: string)
sticky
默认为 null,可以是 "before"
或 "after"
,用来说明坐标的坐标应在字符前还是字符后。CodeMirror.changeEnd(change: object) → {line, ch}
from
、to
和 text
,同 change 事件。CodeMirror.countColumn(line: string, index: number, tabSize: number) → number