在线代码编辑器 CodeMirror 事件说明

各种CodeMirror对象都会触发事件,客户端代码通过这些事件对各种情况作出反应。这些事件可以通过onoff来绑定和解除绑定处理函数。如果要触发自定义的事件,使用

CodeMirror.signal(target, name, args...)

其中,target是一个非DOM节点(non-DOM-node)对象。

编辑器会触发下列事件,其中参数instance总是指向编辑器本身的引用。

“change” (instance: CodeMirror, changeObj: object)
每次编辑器内容更改时触发,第二个参数changeObj包含了更改的信息,其结构为:

{
from: number, 
to: number, 
text: array, 
removed: string, 
origin: string
}

fromto是更改开始和结束的位置(例如:在更改在第19行行首时为 {ch:0, line: 18})。
text是当前区域(从from到to)的字符串数组,数组中的每一项表示编辑器中的一行。
removed是更改前当前区域内的内容,这些内容被text覆盖了。
origin 这个参数官方没有解释,我也没有测试,不知道是干嘛的。

“changes” (instance: CodeMirror, changes: array)
这个事件和change事件类似,只是这个事件会批处理每个操作,参数为更改的信息的数组。

“beforeChange” (instance: CodeMirror, changeObj: object)
此事件在更改生效前触发,其处理函数可以选择是修改(modify)还是取消(cancel)更改。第二个参数 changeObj的结构为:

{
from: number,
to: number,
text: array,
change: event object,
cancel: function(),
update: function(from, to, text)
}

cancel是一个函数,用于取消本次更改。
如果此事件不是来源于undoredo,那么可以使用 update(from, to, text)来修改更改的内容(也就是修改编辑器中编辑的部分);由事件undoredo引起的变化不可以通过update函数修改。

“cursorActivity” (instance: CodeMirror)
当光标或选中(内容)发生变化,或者编辑器的内容发生了更改的时候触发。

“keyHandled” (instance: CodeMirror, name: string, event: Event)
快捷键映射(key map)中的快捷键被处理(handle)后触发。其中参数name是在快捷键映射中的名称(例如: Crtl-Xq),参数event是DOM的keydownkeypress事件。

“inputRead” (instance: CodeMirror, changeObj: object)
当用户输入或粘贴时编辑器时触发。

“electrictInput” (instance: CodeMirror, line: integer)
收到指定的electrict输入时触发,会影响行缩进。

“beforeSelectionChange” (instance: CodeMirror, obj: {ranges, update})
此事件在选中内容变化前触发。

“viewportChange” (instance: CodeMirror, from: number, to: number)
编辑器的视口( view port )改变(滚动,编辑或其它动作)时触发。fromend是视口的新的开始和结束位置。

“swapDoc” (instance: CodeMirror, oldDoc: Doc)
使用swapDoc替换编辑器内的文档时触发。

“gutterClick” (instance: CodeMirror, line: integer, gutter: string, clickEvent: Event)
编辑器的gutter(行号区域)点击时触发。第一个参数是编辑器的实例,第二个参数点击处的行号(从0开始的),第三个参数是点击处的gutter的CSS类名称,第四个参数是原始的mousedown事件对象。

“gutterContextMenu” (instance: CodeMirror, line: integer, gutter: string, contextMenu: Event: Event)
编辑器的gutter(行号区域)收到上下文菜单事件时触发。第一个参数是编辑器的实例,第二个参数点击处的行号(从0开始的),第三个参数是点击处的gutter的CSS类名称,第四个参数是原始的contextMenu事件对象。可以通过preventDefault阻止事件的后续处理。

“focus” (instance: CodeMirror)
编辑器收到焦点时触发。

“blur” (instance: CodeMirror)
编辑器失去焦点时触发。

“scroll” (instance: CodeMirror)
编辑器滚动条滚动时触发。

“scrollCursorIntoView” (instance: CodeMirror, event: Event)
编辑器滚动光标到视口内时触发。可以被包含编辑器的可以滚动的容器的钩子捕获。当其preventDefault函数调用时,CodeMirror不会再主动滚动窗口。

“update” (instance: CodeMirror)
当CodeMirror更新其DOM显示时触发。

“renderLine” (instance: CodeMirror, line: LineHandle, element: Element)
行渲染或重新渲染时触发。触发是在DOM元素创建后,添加到document前。事件处理函数可以处理结果元素的样式,或者添加事件处理函数,但是不应该改变编辑器的状态。

“mousedown”, “dblclick”, “contextmenu”, “keydown”, “keypress”, “keyup”, “dragstart”, “dragenter”, “dragover”, “drop” (instance: CodeMirror, event: Event)
CodeMirror处理这些类型的DOM事件时触发。你可以通过preventDefault阻止事件,也可以给一个codemirrorIgnore属性来通知CodeMirror以后不再处理此类事件。

文档对象 (CodeMirror.Doc的实例)触发以下事件

“change” (doc: CodeMirror.Doc, changeObj: object)
文档改变时触发。changeObj与传给编辑器的change事件的参数相同。

“beforeChange” (doc: CodeMirror.Doc, change: object)
参照编辑器的beforeChange事件。

“cursorActivity” (doc: CodeMirror.Doc)
光标或选中内容改变时触发。

“beforeSelectionChange” (doc: CodeMirror.Doc, selection: {head, anchor})
与编辑器的同名事件相同。

行处理器(返回值,如:getLineHandle)支持以下事件

“delete” ()
行对象删除时触发。行对象与行开头关联。

“change” (line: LineHandle, changeObj: object)
行内的文本内容发生任何改变时触发(但是行并未完全删除)。changeObj与编辑器对象的change事件的参数相同。

标记处理器(CodeMirror.TextMarker),作为markTextsetBookmark的返回值,触发以下事件

“beforeCursorEnter” ()
光标进入标记范围时触发。在这个处理函数中,可以获取编辑状态但是不可以修改,异常情况下可能导致触发事件范围被清除。

“clear” (from: {line, ch}, to: {line, ch})
范围清除时触发,无论通过clearOnEnter覆盖选择内容还是clear() 清除内容。每次处理只会触发一次。注意通过编辑清除范围不会触发,因为undo动作可能会让范围恢复。fromto是文档清除的范围。

“hide” ()
编辑操作将标记的最后一部分移除时触发。

“unhide” ()
标记被编辑移除后,undo操作重新标记时触发。

行部件(CodeMirror.LineWidget),由addLineWidget返回,触发以下事件

“redraw” ()
编辑器重新添加部件到DOM时触发。此事件在部件添加后触发(如果滚动进视口),然后当其滚出视口然后再回来时会再次触发,或者修改编辑器选项或行部件需要重绘部件时触发。