CodeMirror用户手册

用户手册和参考指南版本5.46.1

CodeMirror是一个代码编辑器组件,可以嵌入到Web页面中。核心库提供编辑器组件,不提供伴随按钮,自动完成或其他IDE功能。它确实提供了丰富的API,在此基础上可以直接实现这些功能。有关额外功能的可重用实现,请参阅分发中包含的插件外部托管插件列表

CodeMirror使用特定于语言的模式。模式是JavaScript程序,可帮助用给定语言编写的文本颜色(以及可选地缩进)。该发行版有许多模式(参见mode/ 目录),并且为其他语言编写新模式并不困难。

基本用法

使用CodeMirror的最简单方法是简单地加载lib/在发行版中找到的脚本和样式表,以及来自其中一个mode/目录的模式脚本。例如:

< script  src = “lib / codemirror.js” > </ script > 
< link  rel = “stylesheet”  href = “lib / codemirror.css” > 
< script  src = “mode / javascript / javascript.js” > </ script >script  src = “lib / codemirror.js” > </ script > 
< link  rel = “stylesheet”  href = “lib / codemirror.css” > 
< script  src = “mode / javascript / javascript.js” > </ script >

(或者,使用模块加载器。稍后会详细介绍。

完成此操作后,可以像这样创建一个编辑器实例:

VAR  myCodeMirror  =  CodeMirror(文件。体); myCodeMirror  =  CodeMirror(文件。体);

编辑器将附加到文档正文,将开始为空,并将使用我们加载的模式。为了更好地控制新编辑器,可以将配置对象CodeMirror作为第二个参数传递给:

VAR  myCodeMirror  =  CodeMirror(文件。主体, { 值:“功能myScript的(){返回100;} \ n”个,模式:“的javascript” } );
   
    
 myCodeMirror  =  CodeMirror(文件。主体, { 值:“功能myScript的(){返回100;} \ n”个,模式:“的javascript” } );
   
    

这将使用其中的一段代码初始化编辑器,并明确告诉它使用JavaScript模式(这在加载多个模式时很有用)。有关CodeMirror接受的配置选项的完整讨论,请参见下文

如果您不想将编辑器附加到元素,并且需要更多地控制它的插入方式,则CodeMirror函数的第一个参数也可以是一个函数,当给定DOM元素时,将其插入到文件在某处。例如,这可以用于用真正的编辑器替换textarea:

VAR  myCodeMirror  =  CodeMirror(函数ELT) { myTextArea。parentNode。的replaceChild(ELT,myTextArea); } ,{ 值:myTextArea。值 } );
   
   myCodeMirror  =  CodeMirror(函数ELT) { myTextArea。parentNode。的replaceChild(ELT,myTextArea); } ,{ 值:myTextArea。值 } );
   
  

但是,对于此用例,这是使用CodeMirror的常用方法,该库提供了更强大的快捷方式:

var  myCodeMirror  =  CodeMirror。fromTextArea(myTextArea); myCodeMirror  =  CodeMirror。fromTextArea(myTextArea);

除其他外,这将确保在提交表单(如果它是表单的一部分)时,使用编辑器的内容更新textarea的值。有关此方法的完整说明,请参阅API参考

模块加载器

CodeMirror分发中的文件包含用于在AMD或CommonJS环境中加载它们(及其依赖项)的填充程序。如果这些变量exports 和module存在,有类型的对象,CommonJS的风格要求将被使用。如果没有,但有define一个amd属性存在的功能,将使用AMD风格(RequireJS)。

可以使用Browserify或类似工具使用CodeMirror静态构建模块。或者,使用RequireJS在运行时动态加载依赖项。这两种方法都具有以下优点:它们不使用全局命名空间,因此可以执行诸如将多个版本的CodeMirror并排加载之类的操作。

以下是使用RequireJS加载CodeMirror的简单示例:

要求([ “厘米/ LIB / codemirror” ,厘米/模式/ htmlmixed / htmlmixed” ] ,函数CodeMirror){ CodeMirror。fromTextArea(文件。的getElementById(“代码”),{ lineNumbers:,模式:“htmlmixed” } ); } );
   
  
   
     
     
  
([ “厘米/ LIB / codemirror” ,厘米/模式/ htmlmixed / htmlmixed” ] ,函数CodeMirror){ CodeMirror。fromTextArea(文件。的getElementById(“代码”),{ lineNumbers:,模式:“htmlmixed” } ); } );
   
  
   
     
     
  

它将自动加载混合HTML模式所依赖的模式(XML,JavaScript和CSS)。千万不能使用RequireJS” paths选项的路径配置到CodeMirror,因为它会通过相对路径突破加载子模块。请改用packages 配置选项,如下所示:

要求。config({ packages:[ { name:“codemirror”,location:“../ path / to / codemirror”,main:“lib / codemirror” } ] } );
   
     
     
     
  
。config({ packages:[ { name:“codemirror”,location:“../ path / to / codemirror”,main:“lib / codemirror” } ] } );
   
     
     
     
  

组态

两个CodeMirror 函数及其fromTextArea方法采取作为第二(可选的)参数包含配置选项的对象。任何未提供的选项都将从CodeMirror.defaults包含默认选项的对象中获取。您可以更新此对象以更改页面上的默认值。

不以任何方式检查选项,因此设置伪造选项值必然会导致奇怪的错误。

这些是支持的选项:

value: string|CodeMirror.Doc

编辑器的起始值。可以是字符串,也可以是文档对象

mode: string|object

使用的模式。如果没有给出,这将默认为加载的第一个模式。它可以是一个字符串,可以简单地命名模式,也可以是与模式关联的MIME类型。或者,它可以是包含模式配置选项的对象,具有name命名模式的属性(例如{name: "javascript", json: true})。每种模式的演示页面都包含有关模式支持的配置参数的信息。您可以通过检查CodeMirror.modes 和CodeMirror.mimeModes对象来询问CodeMirror已定义了哪些模式和MIME类型。第一个将模式名称映射到它们的构造函数,第二个将MIME类型映射到模式规范。

lineSeparator: string|null

显式设置编辑器的行分隔符。默认情况下(值null),文档将在CRLF以及单独的CR和LF上拆分,并且单个LF将在所有输出中用作行分隔符(例如getValue)。给定特定字符串时,只会在该字符串上拆分行,默认情况下,输出将使用相同的分隔符。

theme: string

用编辑器设计样式的主题。您必须确保.cm-s-[name] 已加载定义相应样式的CSS文件(请参阅theme分发中的目录)。默认值为"default",包含的颜色codemirror.css。它可以使用多个主题化班一次,例如"foo bar"将同时分配cm-s-foocm-s-bar类编辑器。

indentUnit: integer

应该缩进一个块(无论编辑语言中的含义)多少个空格。默认值为2。

smartIndent: boolean

是否使用模式提供的上下文相关缩进(或者只是缩进与之前的行相同)。默认为true。

tabSize: integer

制表符的宽度。默认为4。

indentWithTabs: boolean

在缩进时,是否tabSize 应将第一个N * 空格替换为N个制表符。默认值为false。

electricChars: boolean

配置编辑器在键入可能更改其正确缩进的字符时是否应重新缩进当前行(仅在模式支持缩进时才有效)。默认为true。

specialChars: RegExp

用于确定哪些字符应由特殊占位符替换的正则表达式。非常适用于非打印特殊字符。默认是/[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff]/

specialCharPlaceholder: function(char) → Element

给定由specialChars 选项标识的特殊字符的函数,生成用于表示字符的DOM节点。默认情况下,会显示一个红点(),并带有标题工具提示以指示字符代码。

direction: "ltr" | "rtl"

翻转整体布局并选择基本段落方向为从左到右或从右到左。默认为“ltr”。CodeMirror将Unicode双向算法应用于每一行,但不自动检测基本方向 - 它设置为所有行的编辑器方向。当基本方向与用户意图不匹配时,生成的顺序有时会出错(例如,前导和尾随标点跳转到行的错误一侧)。因此,允许用户切换此选项对多语言输入很有帮助。

rtlMoveVisually: boolean

确定通过从右到左(阿拉伯语,希伯来语)文本的水平光标移动是否是可视的(按向左箭头向左移动光标)或逻辑(按向左箭头移动到字符串中的下一个较低索引,这在视觉上是正确的从右到左的文字)。默认false 位于Windows和true其他平台上。

keyMap: string

配置要使用的键映射。默认值是"default",这是唯一定义的键映射codemirror.jskey map目录中可以找到额外的键映射。有关详细信息,请参阅关键映射部分

extraKeys: object

可用于为编辑器指定额外的键绑定,以及由其定义的绑定keyMap。应为null或有效的键映射值。

configureMouse: fn(cm: CodeMirror, repeat: "single" | "double" | "triple", event: Event) → Object

允许您配置鼠标选择和拖动的行为。按下鼠标左键时调用该函数。返回的对象可能具有以下属性:

unit: "char" | "word" | "line" | "rectangle" | fn(CodeMirror, Pos) → {from: Pos, to: Pos}

选择的单位。对于自定义单元,可以是内置单元之一,也可以是一个位置并返回其范围的函数。默认设置是返回"word"双击,"line"三次点击,"rectangle"alt-clicks(或Chrome操作系统,元移位点击)等"single" 。

extend: bool

是否扩展现有选择范围或开始新选择范围。默认情况下,单击班次时会启用此功能。

addNew: bool

启用后,这会为现有选择添加新范围,而不是替换它。默认行为是在Mac OS上为命令单击启用此功能,并在其他平台上按住Control键单击。

moveOnDrag: bool

当鼠标甚至在编辑器内部拖动内容时,它控制是复制(false)还是移动(true)。默认情况下,通过在Mac OS上单击鼠标右键并在其他位置按住Ctrl键单击来启用此功能。

lineWrapping: boolean

CodeMirror是否应滚动或换行以排长行。默认为false(滚动)。

lineNumbers: boolean

是否在编辑器左侧显示行号。

firstLineNumber: integer

在哪个数字开始计数行。默认值为1。

lineNumberFormatter: function(line: integer) → string

用于格式化行号的函数。该函数传递给行号,并应返回将在装订线中显示的字符串。

gutters: array<string | {className: string, style: ?string}>

可用于添加额外的排水沟(超出或代替行号排水沟)。应该是一个CSS类名称或类名/ CSS字符串对的数组,每个都定义一个width(和可选的背景),并将用于绘制排水沟的背景。可以 包括CodeMirror-linenumbers该类,以便明确设置行号装订线的位置(它将默认为所有其他装订线的右侧)。这些类名是传递给的键setGutterMarker

fixedGutter: boolean

确定装订线是否水平滚动内容(false)或在水平滚动期间是否保持固定(true,默认值)。

scrollbarStyle: string

选择滚动条实现。默认为"native",显示本机滚动条。核心库还提供了"null"完全隐藏滚动条的样式。插件可以实现其他滚动条模型。

coverGutterNextToScrollbar: boolean

fixedGutter 打开时,并且存在水平滚动条,默认情况下,此滚动条左侧将显示装订线。如果此选项设置为true,则它将由具有类的元素覆盖CodeMirror-gutter-filler

inputStyle: string

选择CodeMirror处理输入和焦点的方式。核心库定义"textarea""contenteditable"输入模式。在移动浏览器上,默认为"contenteditable"。在桌面浏览器上,默认为"textarea"。在"contenteditable"模型中支持IME和屏幕阅读器更好。目的是使其成为未来现代桌面浏览器的默认设置。

readOnly: boolean|string

这会禁止用户编辑编辑器内容。如果"nocursor"给出特殊值(而不是简单true),则不允许对编辑器进行聚焦。

showCursorWhenSelecting: boolean

选择是否处于活动状态时是否应绘制光标。默认为false。

lineWiseCopyCut: boolean

如果启用(默认情况下),则在没有选择时执行复制或剪切将复制或剪切其上有游标的整行。

pasteLinesPerSelection: boolean

从外部源(而不是编辑器本身)粘贴内容时,如果行数与选择的数量匹配,则默认情况下CodeMirror将为每个选择插入一行。您可以将其设置false为禁用该行为。

selectionsMayTouch: boolean

确定多个选择是在触摸时(默认值)还是仅在它们重叠时(true)连接。

undoDepth: integer

编辑器存储的最大撤消级别数。请注意,这包括选择更改事件。默认为200。

historyEventDelay: integer

在键入或删除时将导致新历史事件开始的不活动时间(以毫秒为单位)。默认为1250。

tabindex: integer

要分配给编辑器的选项卡索引。如果没有给出,则不会分配选项卡索引。

autofocus: boolean

可用于使CodeMirror将焦点集中在初始化上。默认为关闭。当fromTextArea使用when时,并且没有给出该选项的显式值,当源textarea被聚焦时,它将被设置为true,或者它具有autofocus属性而没有聚焦其他元素。

phrases: ?object

某些插件通过该phrase 方法运行用户可见的字符串(例如界面中的标签)以允许翻译。此选项确定该方法的返回值。如果它为null或者没有输入字符串命名的属性的对象,则返回该字符串。否则,返回与该字符串对应的属性的值。

下面列出了一些更专业的低级选项。这些仅在特定情况下有用,您可能希望在第一次阅读本手册时跳过它们。

dragDrop: boolean

控制是否启用拖放。默认开启。

allowDropFileTypes: array<string>

设置(默认为null)时,只能将类型在数组中的文件放入编辑器中。字符串应该是MIME类型,并将根据浏览器报告type 的File对象进行检查。

cursorBlinkRate: number

用于光标闪烁的半周期(以毫秒为单位)。默认闪烁率为530毫秒。通过将此值设置为零,可以禁用闪烁。负值完全隐藏光标。

cursorScrollMargin: number

当接近可滚动文档中可见视图的顶部或底部时,总是在光标上方和下方留出多少额外空间。默认值为0。

cursorHeight: number

确定光标的高度。默认值为1,表示它跨越线的整个高度。对于某些字体(以及一些品味)较小的高度(例如0.85),导致光标无法一直到达线的底部,看起来更好

resetSelectionOnContextMenu: boolean

控制当在当前选择之外单击打开上下文菜单时,是否将光标移动到单击点。默认为true

workTimeworkDelay: number

突出显示由伪背景线程完成,该线程将工作workTime毫秒,然后使用超时睡眠workDelay毫秒。默认值为200和300,您可以更改这些选项以突出显示或多或少的激进。

pollInterval: number

指示CodeMirror应该如何快速轮询其输入textarea以进行更改(在聚焦时)。大多数输入都是由事件捕获的,但某些内容(如某些浏览器上的IME输入)不会生成允许CodeMirror正确检测它的事件。因此,它民意调查。默认值为100毫秒。

flattenSpans: boolean

默认情况下,如果相邻的令牌具有相同的类,则它们会将相邻的令牌组合成单个跨度。这将导致更简单的DOM树,从而表现更好。使用某些样式(例如圆角),这将改变文档的外观。您可以将此选项设置为false以禁用此行为。

addModeClass: boolean

启用时(默认情况下为off),将为每个标记添加一个额外的CSS类,指示生成它的(内部)模式,前缀为"cm-m-"。例如,来自XML模式的标记将获得cm-m-xml该类。

maxHighlightLength: number

当突出显示长行时,为了保持响应,编辑器将放弃并简单地将行的其余部分设置为纯文本到达某个位置时的样式。默认值为10 000.您可以将其设置Infinity为关闭此行为。

viewportMargin: integer

指定在当前滚动到视图中的文档部分上方和下方呈现的行数。这会影响滚动时所需的更新量以及此类更新所做的工作量。您通常应该将其保留为默认值10.可以设置为Infinity确保始终呈现整个文档,因此浏览器的文本搜索会对其进行处理。这会对大文档的性能产生不良影响。

spellcheck: boolean

指定是否在输入上启用拼写检查。

autocorrect: boolean

指定是否在输入上启用自动更正。

autocapitalize: boolean

指定是否在输入上启用自动资本化。

活动

各种与CodeMirror相关的对象会发出事件,这些事件允许客户端代码对各种情况做出反应。可以使用事件触发的对象上的on 和off方法注册此类事件的处理程序。要激活您自己的事件,请使用CodeMirror.signal(target, name, args...),其中target是非DOM节点对象。

编辑器实例触发以下事件。该instance参数总是指编辑器本身。

"change" (instance: CodeMirror, changeObj: object)

每次更改编辑器的内容时​​触发。的changeObj是一个{from, to, text, removed, origin}有关所发生作为第二个参数的变化包含对象的信息。from 并且to是变化开始和结束的位置(在变更前坐标系中)(例如,可能是{ch:0, line:18}位置在第19行的开头)。text是一个字符串数组,表示替换更改范围的文本(按行拆分)。removed曾经是from和之间的文本,to被这个更改覆盖。在DOM更新发生之前,在操作结束之前触发此事件。

"changes" (instance: CodeMirror, changes: array<object>)

"change" 事件类似,但是按操作批处理,传递包含操作中发生的所有更改的数组。操作完成后会触发此事件,并且显示的更改将触发新操作。

"beforeChange" (instance: CodeMirror, changeObj: object)

在应用更改之前触发此事件,并且其处理程序可以选择修改或取消更改。的changeObj对象有fromtotext 属性,与"change"事件。它还有一个cancel()方法,可以调用它来取消更改,如果更改不是来自撤消或重做事件,update(from, to, text)则可以使用一种方法来修改更改。无法修改撤消或重做更改,因为它们包含一些元信息,用于恢复仅对该特定更改有效的旧标记范围。所有三个参数update都是可选的,并且可以保留以保持该字段的现有值不变。注意:您可能无法从"beforeChange"可能导致文档或其可视化更改的处理程序中执行任何操作。这样做,因为直接从CodeMirror实现的内容调用此处理程序,可能会导致编辑器损坏。

"cursorActivity" (instance: CodeMirror)

将在光标或选择移动时触发,或者对编辑器内容进行任何更改。

"keyHandled" (instance: CodeMirror, name: string, event: Event)

通过键映射处理键后触发。name是已处理键的名称(例如"Ctrl-X""'q'"),event是DOM keydown 或keypress事件。

"inputRead" (instance: CodeMirror, changeObj: object)

从隐藏的textarea读取新输入(由用户键入或粘贴)时触发。

"electricInput" (instance: CodeMirror, line: integer)

如果文本输入与模式的电子模式匹配,则触发,这导致线条的缩进发生变化。

"beforeSelectionChange" (instance: CodeMirror, obj: {ranges, origin, update})

在移动选择之前触发此事件。它的处理程序可以检查选择范围的集合,作为 参数属性中的{anchor, head}对象数组出现,并可选择通过调用此对象上的方法来更改它们,并以相同的格式传递范围数组。该对象还包含一个属性,该属性包含传递给选择更改方法的原始字符串(如果有)。此事件的 处理程序与处理程序具有相同的限制- 它们不应执行任何操作来直接更新编辑器的状态。rangesobjupdateorigin"beforeChange"

"viewportChange" (instance: CodeMirror, from: number, to: number)

每当编辑器的视口发生变化时(由于滚动,编辑或任何其他因素)都会触发。在fromto论点,视口的新的开始和结束。

"swapDoc" (instance: CodeMirror, oldDoc: Doc)

当使用该swapDoc 方法替换编辑器的文档时,将发出此信号。

"gutterClick" (instance: CodeMirror, line: integer, gutter: string, clickEvent: Event)

单击编辑器装订线(行号区域)时触发。将编辑器实例作为第一个参数传递,将作为第二个参数单击的行的(从零开始)编号,作为第三个参数单击的装订线的CSS类,以及mousedown作为第四个参数的原始事件对象传递。

"gutterContextMenu" (instance: CodeMirror, line: integer, gutter: string, contextMenu: Event: Event)

当编辑器装订线(行号区域)收到contextmenu事件时触发。将编辑器实例作为第一个参数传递,将作为第二个参数单击的行的(从零开始)编号,作为第三个参数单击的装订线的CSS类,以及contextmenu作为第四个参数的原始 鼠标事件对象传递。您可以preventDefault在事件中发出信号,表明CodeMirror不应该进一步处理。

"focus" (instance: CodeMirror, event: Event)

编辑器聚焦时触发。

"blur" (instance: CodeMirror, event: Event)

编辑器未聚焦时触发。

"scroll" (instance: CodeMirror)

滚动编辑器时触发。

"refresh" (instance: CodeMirror)

编辑器刷新 或调整大小时触发。对于依赖于编辑器或字符大小的缓存值无效非常有用。

"optionChange" (instance: CodeMirror, option: string)

每次更改选项时调度setOption

"scrollCursorIntoView" (instance: CodeMirror, event: Event)

编辑器尝试将光标滚动到视图时触发。可以挂钩以处理编辑器周围的其他可滚动容器。当事件对象preventDefault调用其方法时,CodeMirror本身不会尝试滚动窗口。

"update" (instance: CodeMirror)

将在CodeMirror更新其DOM显示时触发。

"renderLine" (instance: CodeMirror, line: LineHandle, element: Element)

每当一行(重新)渲染到DOM时触发。在构建DOM元素之后立即触发,然后将其添加到文档中。用所得元素的样式,或处理程序就可以乱添加事件处理程序,但应该不会尝试改变编辑器的状态。

"mousedown""dblclick""touchstart""contextmenu""keydown""keypress""keyup","cut""copy""paste""dragstart""dragenter""dragover""dragleave""drop"(instance: CodeMirror, event: Event)

CodeMirror处理此类型的DOM事件时触发。您可以使用preventDefault该事件,或者给它一个truthy codemirrorIgnore属性,以表明CodeMirror不应该进一步处理。

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

"change" (doc: CodeMirror.Doc, changeObj: object)

每当文档发生更改时触发。changeObj具有与传递给编辑器"change" 事件的对象类似的类型。

"beforeChange" (doc: CodeMirror.Doc, change: object)

请参阅编辑器实例上相同事件描述

"cursorActivity" (doc: CodeMirror.Doc)

每当此文档中的光标或选择发生更改时触发。

"beforeSelectionChange" (doc: CodeMirror.Doc, selection: {head, anchor})

在编辑器实例上触发的同名事件等效。

行句柄(例如,返回getLineHandle)支持这些事件:

"delete" ()

删除行对象时将触发。线对象与线的开头相关联。当您需要找出给定线上的装订线标记何时被移除时,这非常有用。

"change" (line: LineHandle, changeObj: object)

线路的文本内容以任何方式更改时触发(但线条未完全删除)。该change 对象类似于在编辑器对象上传递给change事件的对象。

标记范围句柄(CodeMirror.TextMarker),由markText and 返回setBookmark,发出以下事件:

"beforeCursorEnter" ()

光标进入标记范围时触发。从此事件处理程序,可以检查编辑器状态但修改编辑器状态,但可以清除事件触发的范围。

"clear" (from: {line, ch}, to: {line, ch})

在清除范围时触发,通过光标移动结合clearOnEnter 或通过调用其clear()方法。每个手柄只会被发射一次。请注意,通过文本编辑删除范围不会触发此事件,因为撤消操作可能会使范围恢复。from 并to给出文档中清除范围时所覆盖范围的部分。

"hide" ()

通过编辑操作从文档中删除标记的最后部分时触发。

"unhide" ()

在通过编辑移除标记后,撤消操作将标记返回时触发。

线路小部件(CodeMirror.LineWidget),返回addLineWidget,触发这些事件:

"redraw" ()

编辑器将窗口小部件重新添加到DOM时触发。这将在添加窗口小部件后立即发生(如果它被滚动到视图中),然后在滚动出视图并再次返回时,或者当更改编辑器选项或窗口小部件所在的行时需要要重绘的小部件。

关键地图

键映射是将键和鼠标按钮与功能相关联的方法。键映射是一个对象映射字符串,用于将按钮标识为实现其功能的函数。

CodeMirror发行版附带EmacsVimSublime Text- style键盘映射。

密钥由名称或字符标识。该CodeMirror.keyNames对象定义了公共密钥的名称,并将它们与密钥代码相关联。这里定义名称的例子有EnterF5Q。这些可以作为前缀Shift-Cmd-Ctrl-,并Alt-指定一个修正。因此,例如,Shift-Ctrl-Space将是有效的密钥标识符。

常见示例:映射Tab键以插入空格而不是制表符。

编辑。的SetOption(“extraKeys” , { 标签:功能厘米){ VAR 空间= 阵列(厘米。getOption(“indentUnit” )+ 1)。加入(“” ); 厘米。replaceSelection(空格); } } );
    
         
    
  
。的SetOption(“extraKeys” , { 标签:功能厘米){ VAR 空间= 阵列(厘米。getOption(“indentUnit” )+ 1)。加入(“” ); 厘米。replaceSelection(空格); } } );
    
         
    
  

或者,可以通过用单引号将其包围来直接指定字符,例如'$' 或'q'。由于浏览器触发键事件的方式存在限制,因此这些事件可能不会以修饰符为前缀。

要绑定鼠标按钮,请使用名称“LeftClick”,“MiddleClick”和“RightClick”。这些也可以使用修饰符作为前缀,此外,单词“Double”或“Triple”可以放在“Click”之前(如在“LeftDoubleClick”中)以绑定双击或三击。这种绑定的函数被传递到被点击作为第二个参数的位置。

例如,可以通过在属性名称中用空格分隔键名来指定多笔划键绑定Ctrl-X Ctrl-V。当映射包含多个stoke绑定或具有未在默认顺序(Shift-Cmd-Ctrl-Alt)中指定的修饰符的键时,必须先调用CodeMirror.normalizeKeyMap它才能使用它。此函数采用键映射并对其进行修改以标准化修改器顺序并正确识别多笔划绑定。它将返回键映射本身。

CodeMirror.keyMap对象将键映射与名称相关联。用户代码和键映射定义可以为此对象分配额外的属性。在需要键映射的任何地方,可以给出一个字符串,该字符串将在此对象中查找。它还包含"default"保存默认绑定的键映射。

键映射中的属性值可以是单个参数(CodeMirror实例),字符串或的函数 false。字符串指的是命令,如下所述。如果该属性设置为false,则CodeMirror会将密钥的处理留给浏览器。密钥处理函数可以返回CodeMirror.Pass以指示它已决定不处理密钥,并且应该给予其他处理程序(或默认行为)转弯。

映射到以字符开头的命令名称"go"或具有truthy motion属性(应该用于光标移动操作)的函数的键将被触发,即使存在额外的Shift修饰符(即"Up": "goLineUp"匹配向上和向上移动)。这用于轻松实现换档选择。

键映射可以通过定义fallthrough属性来相互推迟。这表示当在地图本身中找不到密钥时,应该搜索一个或多个其他地图。它可以包含单个键映射或键映射数组。

当一个键映射需要在它变为活动状态时设置某些东西,或者在停用时撕掉一些东西时,它可以包含attach和/或detach属性,它们应该包含带有编辑器实例和下一个或上一个键映射的函数。请注意,这仅适用于 顶级键盘映射,而不适用于使用extraKeys或添加的fallthrough地图或地图addKeyMap

命令

命令是可以在编辑器上执行的无参数操作。它们的主要用途是键绑定。通过向CodeMirror.commands对象添加属性来定义命令。许多常用命令由库本身定义,其中大多数由默认键绑定使用。命令属性的值必须是一个参数(编辑器实例)的函数。

下面的一些命令在默认键映射中引用,但未由核心库定义。这些旨在由用户代码或插件定义。

命令也可以使用该execCommand 方法运行。

selectAllCtrl-A(PC),Cmd-A(Mac)

选择编辑器的全部内容。

singleSelection退出

当存在多个选择时,这将取消选择除主要选择之外的所有选择。

killLineCtrl-K(Mac)

Emacs式线杀。删除光标后的行部分。如果只包含空格,则还会删除该行末尾的换行符。

deleteLineCtrl-D(PC),Cmd-D(Mac)

删除光标下的整行,包括末尾的换行符。

delLineLeft

删除光标前的行部分。

delWrappedLineLeftCmd-Backspace(Mac)

从光标所在的视线左侧删除该行的部分到光标。

delWrappedLineRightCmd-Delete(Mac)

删除从光标到光标所在视线右侧的线条部分。

undoCtrl-Z(PC),Cmd-Z(Mac)

撤消上次更改。请注意,由于浏览器仍然无法使脚本对上下文菜单做出反应或自定义上下文菜单,因此从CodeMirror实例的上下文菜单中选择undo(或redo)不起作用。

redoCtrl-Y(PC),Shift-Cmd-Z(Mac),Cmd-Y(Mac)

重做最后一次撤消的更改。

undoSelectionCtrl-U(PC),Cmd-U(Mac)

撤消对选择的最后一次更改,或者如果历史记录顶部没有仅选择更改,请撤消上次更改。

redoSelectionAlt-U(PC),Shift-Cmd-U(Mac)

重做上一次更改选择,或者如果没有选择更改仍保留最后一次文本更改。

goDocStartCtrl-Home(PC),Cmd-Up(Mac),Cmd-Home(Mac)

将光标移动到文档的开头。

goDocEndCtrl-End(PC),Cmd-End(Mac),Cmd-Down(Mac)

将光标移动到文档的末尾。

goLineStartAlt-Left(PC),Ctrl-A(Mac)

将光标移动到行的开头。

goLineStartSmart

移动到行上文本的开头,或者如果我们已经在那里,则移动到行的实际开始(包括空格)。

goLineEndAlt-Right(PC),Ctrl-E(Mac)

将光标移动到行尾。

goLineRightCmd-Right(Mac)

将光标移动到它所在视线的右侧。

goLineLeftCmd-Left(Mac)

将光标移动到它所在视线的左侧。如果此行被换行,则可能不是该行的开头。

goLineLeftSmart

将光标移动到它所在视线的左侧。如果将它带到行的开头,则表现得像goLineStartSmart

goLineUp向上,Ctrl-P(Mac)

将光标向上移动一行。

goLineDown向下,Ctrl-N(Mac)

向下移动一行。

goPageUpPageUp,Shift-Ctrl-V(Mac)

将光标向上移动一个屏幕,向上滚动相同的距离。

goPageDownPageDown,Ctrl-V(Mac)

将光标向下移动一个屏幕,向下滚动相同的距离。

goCharLeft左,Ctrl-B(Mac)

将光标向左移动一个字符,在到达行首时转到上一行。

goCharRight对,Ctrl-F(Mac)

将光标向右移动一个字符,在到达行尾时转到下一行。

goColumnLeft

将光标向左移动一个字符,但不要跨越线边界。

goColumnRight

将光标向右移动一个字符,不要跨越线边界。

goWordLeftAlt-B(Mac)

将光标移动到上一个单词的开头。

goWordRightAlt-F(Mac)

将光标移动到下一个单词的末尾。

goGroupLeftCtrl-Left(PC),Alt-Left(Mac)

在光标前移动到组的左侧。一个组是一段单词字符,一段标点字符,一个换行符或一个以上的 空格字符。

goGroupRightCtrl-Right(PC),Alt-Right(Mac)

光标后移动到组的右侧(见上文)。

delCharBeforeShift-Backspace,Ctrl-H(Mac)

删除光标前的字符。

delCharAfter删除,Ctrl-D(Mac)

删除光标后的字符。

delWordBeforeAlt-Backspace(Mac)

删除光标前的单词的开头。

delWordAfterAlt-D(Mac)

删除光标后最后一个单词的结尾。

delGroupBeforeCtrl-Backspace(PC),Alt-Backspace(Mac)

在光标前删除的左侧。

delGroupAfterCtrl-Delete(PC),Ctrl-Alt-Backspace(Mac),Alt-Delete(Mac)

在光标后删除到的开头。

indentAutoShift-Tab键

自动缩进当前行或选择。

indentMoreCtrl-](PC),Cmd-](Mac)

通过一个缩进单位缩进当前行或选择。

indentLessCtrl- [(PC),Cmd- [(Mac)

Dedent当前行或由一个缩进单位选择。

insertTab

在光标处插入制表符。

insertSoftTab

插入与光标位置的标签宽度匹配的空格量。

defaultTab标签

如果选择了某些内容,请将其缩进一个缩进单位。如果未选择任何内容,请插入制表符。

transposeCharsCtrl-T(Mac)

交换光标前后的字符。

newlineAndIndent输入

插入换行符并自动缩进新行。

toggleOverwrite插入

翻转覆盖标志。

saveCtrl-S(PC),Cmd-S(Mac)

核心库未定义,仅在关键映射中引用。旨在为用户代码提供一种简单的方法来定义保存命令。

findCtrl-F(PC),Cmd-F(Mac)

findNextCtrl-G(PC),Cmd-G(Mac)

findPrevShift-Ctrl-G(PC),Shift-Cmd-G(Mac)

replaceShift-Ctrl-F(PC),Cmd-Alt-F(Mac)

replaceAllShift-Ctrl-R(PC),Shift-Cmd-Alt-F(Mac)

未由核心库定义,但在搜索插件(或自定义客户端插件)中定义。

定制造型

在某种程度上,可以通过修改样式表文件来更改CodeMirror的外观。模式提供的样式表只是为该模式提供颜色,并且可以非常直接的方式进行调整。要为编辑器本身设置样式,可以更改或覆盖在其中定义的样式codemirror.css

必须要小心,因为这个文件中的许多规则都是使CodeMirror正常运行所必需的。当然,调整颜色应该是安全的,并且在某种程度上可以改变很多其他事情。此文件中定义的CSS类具有以下角色:

CodeMirror

编辑器的外部元素。这应该用于编辑器的宽度,高度,边框和定位。也可用于设置应该包含编辑器内部所有内容的样式(例如字体和字体大小),或设置背景。设置这个类的height风格auto会让编辑调整大小以适应其内容(建议也设置viewportMargin 选项Infinity执行此操作时。

CodeMirror-focused

每当编辑器聚焦时,top元素就会获得此类。这用于隐藏光标,并在编辑器未聚焦时为选择提供不同的颜色。

CodeMirror-gutters

这是所有排水沟的背景。使用它来设置默认的装订线背景颜色,并可选择在装订线右侧添加边框。

CodeMirror-linenumbers

使用此选项可为行号装订线提供背景或宽度。

CodeMirror-linenumber

用于设置实际的单个行号。这些不是CodeMirror-linenumbers (复数)元素的子元素,而是绝对定位以覆盖它。使用此选项可设置行号的对齐和文本属性。

CodeMirror-lines

可见的线条。您可以在此处为编辑器内容指定垂直填充。

CodeMirror-cursor

游标是一个绝对定位的块元素。您可以根据自己的喜好选择它。

CodeMirror-selected

选择由span具有此类的元素表示。

CodeMirror-matchingbracket, CodeMirror-nonmatchingbracket

这些用于匹配匹配(或不匹配)的括号。

如果您的页面样式表对所有divpre元素执行时髦的事情(您可能不应该这样做),则必须定义规则以再次为CodeMirror 类下的元素取消这些效果。

主题也只是CSS文件,它定义了各种语法元素的颜色。查看目录中的theme文件。

编程API

许多CodeMirror功能只能通过其API获得。因此,如果要将代码公开给用户,则需要编写代码(或使用插件)。

只要表示文档中的点,API就会使用带有linech属性的对象。两者都是零基础的。CodeMirror确保“剪切”客户端代码传递的任何位置,以便它们适合文档内部,因此您不必过于担心清理坐标。如果您给出ch一个值null,或者没有指定它,它将被替换为指定行的长度。这些职位也可能具有sticky财产控制权,"before"或者"after"该职位是否与其之前或之后的角色相关联。例如,这会影响光标在折线或双向方向边界上绘制的位置。

doc.除非另有说明,否则在CodeMirror(编辑器)实例和CodeMirror.Doc实例上都会调用带有can 前缀的方法。前缀的方法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

获取编辑器中给定点之间的文本,该文本应该是{line, ch}对象。可以给出可选的第三个参数来指示要使用的行分隔符字符串(默认为"\n")。

doc.replaceRange(replacement: string, from: {line, ch}, to: {line, ch}, ?origin: string)

替换的文件的一部分from ,并to与给定的字符串。from 并且to必须是{line, ch}对象。to可以留下来简单地将字符串插入位置from。当origin 给出时,它将被传递给"change"事件,并且其第一个字母将用于确定是否可以以针对选择源描述的方式将此更改与先前的历史事件合并。

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行号给出,从范围start可达(不包括)end,并调用f为每个线,传递线手柄。这是访问一系列行处理程序的一种更快的方法,而不是调用getLineHandle 每个行处理程序。请注意,行句柄具有text包含行的内容(作为字符串)的属性。

doc.markClean()

将编辑器内容设置为“clean”,这是一个在编辑之前将保留的标志,并且当再次撤消此类编辑时将再次设置该标志。用于跟踪是否需要保存内容。这个功能不赞成使用changeGeneration,它允许多个子系统跟踪不同的清洁概念而不会干扰。

doc.changeGeneration(?closeEvent: boolean) → integer

返回一个后来可以传递给的数字,isClean以测试是否在此期间进行了任何编辑(而不是撤消)。如果closeEvent为true,则当前历史事件将“关闭”,这意味着它不能与进一步更改组合(通常组合快速键入或删除事件)。

doc.isClean(?generation: integer) → boolean

返回文档当前是否干净 - 自初始化后未进行修改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}

检索主要 选择的一端。start是一个可选字符串,指示要返回的选择的结尾。它可以是"from""to""head" (当按下Shift +方向移动所述选择的侧面),或"anchor"(选择的固定侧)。省略参数与传递相同"head"{line, ch}将返回一个对象。

doc.listSelections() → array<{anchor, head}>

检索所有当前选择的列表。这些将始终排序,并且永不重叠(重叠选择合并)。阵列中的每个对象都包含anchor 和head属性参考{line, ch}的对象。

doc.somethingSelected() → boolean

如果选择任何文本,则返回true。

doc.setCursor(pos: {line, ch}|number, ?ch: number, ?options: object)

设置光标位置。您可以将单个{line, ch}对象或行和字符作为两个单独的参数传递。将在给定位置使用单个空选择替换所有选择。支持的选项与for相同setSelection

doc.setSelection(anchor: {line, ch}, ?head: {line, ch}, ?options: object)

设置单个选择范围。anchor 而head应该是{line, ch} 对象。未给出时head默认为anchor。支持以下选项:

scroll: boolean

确定是否应将选择头滚动到视图中。默认为true。

origin: string

确定选择历史事件是否可以与前一个事件合并。当一个原点以字符开头+,并且最后记录的选择具有相同的原点并且相似时(接近时间,折叠或两者都未折叠),新的选择将替换旧的。当它开始时*,它将始终替换先前的事件(如果它具有相同的原点)。内置动作使用"+move"原点。用户输入使用"+input"原点。

bias: number

确定选择端点落入原子范围时应调整的方向。可以是-1(向后)或1(向前)。如果没有给出,偏差将基于旧选择的相对位置 - 编辑器将尝试远离该选择,以防止卡住。

doc.setSelections(ranges: array<{anchor, head}>, ?primary: integer, ?options: object)

设置一组新选择。给定数组中必须至少有一个选择。如果primary是数字,则确定哪个选择是主要选择。如果未给出,则主索引取自上一个选择,如果前一个选择的范围小于新的范围,则设置为最后一个范围。支持相同的选项setSelection

doc.addSelection(anchor: {line, ch}, ?head: {line, ch})

向现有选择集添加新选择,并使其成为主要选择。

doc.extendSelection(from: {line, ch}, ?to: {line, ch}, ?options: object)

类似于setSelection但是,如果保持移位或设置延伸标志,则移动选择的头部,同时将锚留在其当前位置。to是可选的,并且可以传递以确保最终选择区域(例如单词或段落)(除了该区域和当前锚点之间的任何位置)。当存在多个选择时,此方法将删除除主要选择之外的所有选择。支持相同的选项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)

设置或清除“extends”标志,其作用类似于shift键,因为它将导致光标移动并调用以extendSelection 使选择锚点保持原位。

doc.getExtending() → boolean

获取'extends'标志的值。

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"。将返回通过移动amount时间指定距离产生的位置unit。如果visually是真的,从右到左文本的运动将是可视的而不是逻辑的。通过点击文档的结尾或开始剪切动作时,返回的值将具有hitSide 设置为true 的属性。

cm.findPosV(start: {line, ch}, amount: integer, unit: string) → {line, ch, ?hitSide: boolean}

类似于findPosH,但用于垂直运动。unit可能是"line""page"。其他参数和返回值具有与它们相同的解释findPosH

cm.findWordAt(pos: {line, ch}) → {anchor: {line, ch}, head: {line, ch}}

返回给定位置的“单词”(字母,空格或标点符号)的开头和结尾。

配置方法

cm.setOption(option: string, value: any)

更改编辑器的配置。option 应该是选项的名称,并且value应该是该选项的有效值。

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可以是模式规范或模式对象(具有token方法的对象)。该options参数是可选的。如果给定,它应该是一个对象,可选地包含以下选项:

opaque: bool

默认为关闭,但可以给出允许叠加样式,如果不是null,则完全覆盖基本模式的样式,而不是两者一起应用。

priority: number

确定应用叠加层的顺序。具有高优先级的那些应用于具有较低优先级的那些之后,并且能够覆盖之前的那些的不透明性。默认为0。

cm.removeOverlay(mode: string|object)

将为mode 参数传递的确切值addOverlayname与该值的属性对应的字符串传递给此,以再次移除叠加层。

cm.on(type: string, func: (...args))

在编辑器实例上为给定的事件类型(字符串)注册事件处理程序。还有一个CodeMirror.on(object, type, func)版本允许在任何对象上注册事件。

cm.off(type: string, func: (...args))

删除编辑器实例上的事件处理程序。同样CodeMirror.off(object, type, func)也存在。

文件管理方法

每个编辑器都CodeMirror.Doc与其文档的实例相关联。文档表示编辑器内容,以及选择,撤消历史和模式。文档一次只能与一个编辑器关联。您可以通过调用CodeMirror.Doc(text: string, mode: Object, firstLineNumber: ?number, lineSeparator: ?string) 构造函数来创建新文档。最后三个参数是可选的,可用于设置文档的模式,使其从0以外的行号开始,并分别设置特定的行分隔符。

cm.getDoc() → Doc

从编辑器中检索当前活动的文档。

doc.getEditor() → CodeMirror

检索与文档关联的编辑器。可能会回来null

cm.swapDoc(doc: CodeMirror.Doc) → Doc

将新文档附加到编辑器。返回旧文档,现在不再与编辑器关联。

doc.copy(copyHistory: boolean) → Doc

创建给定文档的相同副本。如果copyHistory是,则还将复制历史记录。无法直接在编辑器上调用。

doc.linkedDoc(options: object) → Doc

创建链接到目标文档的新文档。链接的文档将保持同步(对一个文档的更改也将应用于另一个),直到取消链接。这些是支持的选项:

sharedHist: boolean

启用后,链接的副本将与原始文件共享撤消历史记录。因此,在两者之一中完成的事情可以在另一件中完成,反之亦然。

from: integer

to: integer

可以将新文档作为原始子视图。子视图仅显示给定的行范围。请注意,子视图内的线坐标将与父视图中的线坐标一致,因此例如从第10行开始的子视图将其第一行称为第10行,而不是0。

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

获取撤消历史记录的(JSON可序列化)表示。

doc.setHistory(history: object)

将编辑器的撤消历史记录替换为提供的撤消历史记录,该历史记录必须是返回的值getHistory。请注意,如果编辑器内容与getHistory调用时的内容不同,则会产生完全未定义的结果。

文字标记方法

doc.markText(from: {line, ch}, to: {line, ch}, ?options: object) → TextMarker

可用于标记具有特定CSS类名称的文本范围。fromto应该是{line, ch}对象。该options 参数是可选的。给定时,它应该是一个可能包含以下配置选项的对象:

className: string

为标记的文本片段分配CSS类。

inclusiveLeft: boolean

确定插入标记左侧的文本是否会在其内部或外部结束。

inclusiveRight: boolean

喜欢inclusiveLeft,但是对于右侧。

atomic: boolean

当涉及光标移动时,原子范围作为单个单元 - 即不可能将光标放在它们内部。在原子范围内,inclusiveLeft 并且inclusiveRight具有不同的含义 - 它们将阻止光标分别直接放置在范围之前和之后。

collapsed: boolean

折叠范围不会显示在显示屏中。设置要折叠的范围将自动使其成为原子。

clearOnEnter: boolean

启用后,只要光标进入其范围,将使标记自行清除。这对于需要在用户尝试编辑时“快速打开”的文本替换小部件非常有用。"clear"当发生这种情况时,可以使用在范围句柄上触发的 事件进行通知。

clearWhenEmpty: boolean

确定标记变空时是否自动清除。默认为true。

replacedWith: Element

使用给定节点显示此范围。意味着崩溃和原子。给定的DOM节点必须是内联元素(与块元素相对)。

handleMouseEvents: boolean

replacedWith给定,这决定了编辑器是否将捕获在这个小部件发生的鼠标和拖动事件。默认值为false - 默认浏览器处理程序或窗口小部件上的特定处理程序将捕获事件。

readOnly: boolean

只要没有清除,只读调用范围就可以不被修改,除非通过调用setValue重置整个文档。注意:添加只读范围当前会清除编辑器的撤消历史记录,因为只读空间部分无效的现有撤消事件会破坏历史记录(在当前实现中)。

addToHistory: boolean

设置为true(默认值为false)时,添加此标记将在撤消历史记录中创建可单独撤消的事件(清除标记)。

startStyle: string

可用于指定要应用于作为标记一部分的最左侧跨度的额外CSS类。

endStyle: string

相当于startStyle,但对于最右边的跨度。

css: string

要应用于覆盖文本的CSS字符串。例如"color: #fe3"

attributes: object

给定时,将给定对象中的属性添加到为标记文本创建的元素中。不支持以这种方式添加class或 style属性。

shared: boolean

当目标文档链接到其他文档时,您可以设置shared为true以使标记出现在所有文档中。默认情况下,标记仅出现在其目标文档中。

该方法将返回一个对象,它表示该标记(带构造CodeMirror.TextMarker),它公开了三种方法: clear(),以去除标记, find(),它返回一个{from, to}对象(既保持文档位置),表示该标记范围的当前位置,或者undefined如果标记不再在文档中,最后changed(),如果您已经完成了可能会更改标记大小的内容(例如更改replacedWith 节点的内容),并且想要便宜地更新显示,则可以调用该标记。

doc.setBookmark(pos: {line, ch}, ?options: object) → TextMarker

在给定位置插入书签,即在编辑时围绕文本的句柄。书签有两种方法find()clear()。第一个返回书签的当前位置(如果它仍在文档中),第二个显式删除书签。options参数是可选的。如果给定,则识别以下属性:

widget: Element

可用于在书签的当前位置显示DOM节点(类似于replacedWith 选项markText)。

insertLeft: boolean

默认情况下,当光标位于书签顶部时键入的文本将结束到书签的右侧。将此选项设置为true可使其向左移动。

shared: boolean

请参见相应的选项 来markText

handleMouseEvents: boolean

与此同时markText,这将确定为此书签插入的窗口小部件上的鼠标事件是否由CodeMirror处理。默认值为false。

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

将给定装订线(由其CSS类标识,请参阅gutters选项)的装订线标记设置为给定值。值可以是null清除标记,也可以是DOM元素来设置它。DOM元素将显示在指定行旁边的指定装订线中。

doc.clearGutter(gutterID: string)

在删除所有排水沟标记排水沟与给定的ID。

doc.addLineClass(line: integer|LineHandle, where: string, class: string) → LineHandle

为给定行设置CSS类名。line 可以是数字或行句柄。where确定该类应该应用于哪个元素,可以是"text"(文本元素,位于选择前面),"background"(将在选择后面的背景元素),"gutter"(行的装订线空间),或"wrap"(包装所有线元素的包装节点,包括装订线元素。class应该是要应用的类的名称。

doc.removeLineClass(line: integer|LineHandle, where: string, class: string) → LineHandle

从一行中删除CSS类。line可以是行句柄或数字。where应的一个"text""background""wrap" (见addLineClass)。class 可以保留删除指定节点的所有类,或者只删除特定类的字符串。

doc.lineInfo(line: integer|LineHandle) → object

返回给定行的行号,文本内容和标记状态,可以是数字句柄也可以是行句柄。返回的对象具有结构{line, handle, text, gutterMarkers, textClass, bgClass, wrapClass, widgets},其中gutterMarkers是将gutter ID映射到标记元素的对象,并且widgets是附加到此行的线小部件的数组,并且各种类属性引用添加的类addLineClass

cm.addWidget(pos: {line, ch}, node: Element, scrollIntoView: boolean)

Puts node(应该是绝对定位的DOM节点)放入编辑器中,位于给定{line, ch}位置的正下方。如果scrollIntoView为true,编辑器将确保整个节点可见(如果可能)。要再次删除窗口小部件,只需使用DOM方法(将其移动到其他位置,或调用removeChild其父窗口)。

doc.addLineWidget(line: integer|LineHandle, node: Element, ?options: object) → LineWidget

添加一个行小部件,一行显示在一行下方,跨越整个编辑器的宽度,并向下移动它下面的行。line应该是一个整数或一个行句柄,并且node应该是一个DOM节点,它将显示在给定的行下面。options,当给定时,应该是配置窗口小部件行为的对象。支持以下选项(默认为false):

coverGutter: boolean

小部件是否应该覆盖阴沟。

noHScroll: boolean

面向水平滚动时,窗口小部件是否应保持固定。

above: boolean

使窗口小部件位于上方而不是行的文本下方。

handleMouseEvents: boolean

确定编辑器是否捕获鼠标并拖动此窗口小部件中发生的事件。默认值为false - 默认浏览器处理程序或窗口小部件上的特定处理程序将捕获事件。

insertAt: integer

默认情况下,窗口小部件将添加到该行的其他窗口小部件下方。此选项可用于将其置于不同的位置(顶部为零,N为第N个其他窗口小部件后面的位置)。请注意,这只在创建窗口小部件时生效一次。

请注意,窗口小部件节点将成为具有特定于CodeMirror的CSS类的节点的后代,并且这些类在某些情况下可能会影响它。此方法返回表示窗口小部件放置的对象。它将具有line指向与其关联的行句柄的属性,以及以下方法:

clear()

删除小部件。

changed()

如果您对可能影响其高度的窗口小部件的DOM节点进行了一些更改,请调用此方法。它将强制CodeMirror更新包含窗口小部件的行的高度。

尺寸,滚动和定位方法

cm.setSize(width: number|string, height: number|string)

以编程方式设置编辑器的大小(覆盖适用的CSS规则)。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}角色滚动到视图中的位置,{left, top, right, bottom}像素范围(在编辑器本地坐标中),或{from, to} 包含两个字符位置或两个像素方块的范围。该margin参数是可选的。给定时,它表示给定区域周围的垂直像素量也应该可见。

cm.cursorCoords(where: boolean|{line, ch}, mode: string) → {left, top, bottom}

返回{left, top, bottom}包含光标位置坐标的对象。如果mode"local",它们将相对于可编辑文档的左上角。如果是"page"或否,它们相对于页面的左上角。如果mode 是"window",则坐标相对于当前可见(滚动)窗口的左上角。where可以是一个布尔值,指示您是否需要选择的start(true)或end(false),或者,如果{line, ch}给定了一个对象,它指定您要测量的精确位置。

cm.charCoords(pos: {line, ch}, ?mode: string) → {left, right, top, bottom}

返回任意字符的位置和尺寸。pos应该是一个{line, ch} 对象。这不同之处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)指定的坐标系中,默认为"page"。如果指定了文档底部下方的行,则返回的值是文档中最后一行的底部。默认情况下,返回实际文本的位置。如果`includeWidgets`为true且该行包含行小部件,则返回第一行小部件上方的位置。

cm.defaultTextHeight() → number

返回编辑器的默认字体的行高。

cm.defaultCharWidth() → number

返回编辑器默认字体中“x”的像素宽度。(请注意,对于非等宽字体,这几乎是无用的,即使对于等宽字体,非ascii字符也可能具有不同的宽度)。

cm.getViewport() → {from: number, to: number}

返回一个{from, to}对象,指示文档当前呈现部分的开始(包括)和结束(不包括)。在大文档中,当大多数内容滚动到视图之外时,CodeMirror将仅呈现可见部分及其周围的边距。另见viewportChange 活动。

cm.refresh()

如果您的代码确实需要更改编辑器元素的大小(已经监听了窗口调整大小),或者取消隐藏它,那么您应该通过调用此方法来跟进,以确保CodeMirror仍然按预期进行查找。另请参阅autorefresh插件

模式,状态和与令牌相关的方法

在编写语言感知功能时,了解CodeMirror语言模式所具有的知识通常很有用。有关这些工作方式的详细说明,请参阅模式部分

doc.getMode() → object

获取编辑器的(外部)模式对象。请注意,这与getOption("mode")您的模式规范不同,而不是解析的实例化 模式对象

cm.getModeAt(pos: {line, ch}) → object

获取给定位置的内部模式。这将返回与getMode简单模式相同的返回,但将返回嵌套模式的内部模式(例如htmlmixed)。

cm.getTokenAt(pos: {line, ch}, ?precise: boolean) → object

检索有关当前模式在给定位置({line, ch}对象)之前找到的令牌的信息。返回的对象具有以下属性:

start

令牌开始的字符(在给定行上)。

end

令牌结束的字符。

string

令牌的字符串。

type

令牌类型是分配给令牌的模式,例如"keyword" 或"comment"(也可以为null)。

state

此令牌末尾的模式状态。

如果precise为真,则基于最近的编辑,将保证令牌准确。如果为false或未指定,则令牌将使用缓存状态信息,如果最近进行了编辑并且突出显示尚未完成,则该信息将更快但可能不准确。

cm.getLineTokens(line: integer, ?precise: boolean) → array<{start, end, string, type, state}>

这类似于getTokenAt,但将给定行的所有标记收集到数组中。它比重复调用便宜得多getTokenAt,后者在每个调用的令牌之前重新解析该行的部分。

cm.getTokenTypeAt(pos: {line, ch}) → string

getTokenAt当你只需要在给定位置的令牌类型而没有其他信息时,这是一个(更便宜)的版本。将返回null无标记的标记和字符串,否则可能包含多个以空格分隔的样式名称。

cm.getHelpers(pos: {line, ch}, type: string) → array<helper>

获取给定位置的适用辅助值集。帮助程序提供了一种查找适合模式的功能的方法。该type参数提供了帮助程序命名空间(请参阅参考资料 registerHelper),其中将查找值。当模式本身具有与其对应的属性时type,它直接确定用于查找辅助值的键(它可以是单个字符串,也可以是字符串数组)。如果失败,则使用模式的helperType 属性,最后使用模式的名称。

例如,JavaScript模式具有fold包含的属性"brace"。当brace-fold插件加载,它定义了一个名为助手bracefold 命名空间。然后,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

CodeMirror内部缓冲更改,仅在完成执行某些操作后更新其DOM结构。如果需要在CodeMirror实例上执行大量操作,可以使用函数参数调用此方法。它将调用该函数,缓冲所有更改,并且仅在函数返回后执行昂贵的更新。这可以快得多。此方法的返回值将是函数的返回值。

cm.startOperation()

cm.endOperation()

在正常情况下,请使用上述operation 方法。但是,如果要缓冲异步发生的操作,或者不能将所有操作都包装在回调函数中,则可以调用startOperation告诉CodeMirror开始缓冲更改,并endOperation实际呈现所有更新。注意:如果您使用此API而忘记调用endOperation,编辑器将永远不会更新。

cm.indentLine(line: integer, ?dir: string|integer)

调整给定行的缩进。第二个参数(默认为"smart")可以是以下之一:

"prev"

前一行缩进的基本缩进。

"smart"

使用模式的智能缩进(如果可用),行为与"prev"其他方式相同。

"add"

通过一个缩进单位增加该行的缩进

"subtract"

减少线的缩进。

<integer>

按给定的空格量添加(正数)或减少(负数)缩进。

cm.toggleOverwrite(?value: boolean)

在覆盖和正常插入模式之间切换(未给出参数时),或将覆盖模式设置为特定状态(给定参数时)。

cm.isReadOnly() → boolean

告诉您是否可以由用户编辑编辑器的内容。

doc.lineSeparator()

返回此文档的首选行分隔符字符串,根据 相同名称的选项。如果是该选项null"\n"则返回该字符串。

cm.execCommand(name: string)

在编辑器上运行具有给定名称的命令

doc.posFromIndex(index: integer) → {line, ch}

计算并返回一个{line, ch}对象,该对象的基于零的index人的值相对于编辑器文本的开头。如果index超出文本范围,则返回的对象将分别剪切为文本的开头或结尾。

doc.indexFromPos(object: {line, ch}) → integer

相反的posFromIndex

cm.focus()

给编辑重点。

cm.phrase(text: string) → string

允许使用该phrases 选项转换给定的字符串。

cm.getInputField() → Element

返回编辑器的输入字段。将是textarea或可编辑的div,具体取决于inputStyle 选项的值。

cm.getWrapperElement() → Element

返回表示编辑器的DOM节点,并控制其大小。从树中删除它以删除编辑器实例。

cm.getScrollerElement() → Element

返回负责滚动编辑器的DOM节点。

cm.getGutterElement() → Element

获取包含编辑器装订线的DOM节点。

静态属性

所述CodeMirror对象本身提供了一些有用的性能。

CodeMirror.version: string

它包含一个表示库版本的字符串。这是一个三整数"major.minor.patch",这里patch是零排放,并为开发快照别的东西(通常是一个)。

CodeMirror.fromTextArea(textArea: TextAreaElement, ?config: object)

此方法提供了另一种初始化编辑器的方法。它将textarea DOM节点作为第一个参数,将可选配置对象作为第二个参数。它将用CodeMirror实例替换textarea,并连接该textarea的形式(如果有的话),以确保在提交表单时将编辑器内容放入textarea。textarea中的文本将为编辑器提供内容。以这种方式创建的CodeMirror实例有三个额外的方法:

cm.save()

将编辑器的内容复制到textarea中。

cm.toTextArea()

删除编辑器,并恢复原始textarea(使用编辑器的当前内容)。如果动态创建和销毁使用`fromTextArea`创建的编辑器,而不破坏它们所属的表单,你应该确保调用`toTextArea`来删除编辑器,或者它在表单上的``submit“`处理程序将导致内存泄漏。

cm.getTextArea() → TextAreaElement

返回实例所基于的textarea。

CodeMirror.defaults: object

包含所有选项的默认值的对象。您可以指定其属性来修改默认值(尽管这不会影响已创建的编辑器)。

CodeMirror.defineExtension(name: string, value: any)

如果要根据CodeMirror API定义额外的方法,可以使用defineExtension。这将导致将给定值(通常是方法)添加到从那时开始创建的所有CodeMirror实例。

CodeMirror.defineDocExtension(name: string, value: any)

比如defineExtension,但是该方法将被添加到Doc对象的接口中。

CodeMirror.defineOption(name: string, default: any, updateFunc: function)

同样,defineOption可用于为CodeMirror定义新选项。在updateFunc初始化编辑器时以及修改选项时,将使用编辑器实例和新值调用setOption

CodeMirror.defineInitHook(func: function)

如果您的扩展只需要在初始化Code​​Mirror实例时运行一些代码,请使用CodeMirror.defineInitHook。给它一个函数作为它的唯一参数,从那时起,只要初始化一个新的CodeMirror实例,就会调用该函数(以实例作为参数)。

CodeMirror.registerHelper(type: string, name: string, value: helper)

使用给name定名称空间(type)中的给定注册辅助值。这用于定义可以通过模式查找的功能。将创建(如果它尚不存在)CodeMirror 对象的对象上的属性type,指向将名称映射到值的对象。即在完成之后CodeMirror.registerHelper("hint", "foo", myFoo),该值CodeMirror.hint.foo将指向myFoo

CodeMirror.registerGlobalHelper(type: string, name: string, predicate: fn(mode, CodeMirror), value: helper)

像这样的行为registerHelper,但也将这个帮助器注册为'global',这意味着当使用本地模式和编辑器调用时,getHelpers 只要给定predicate返回true ,它就会被包含在内。

CodeMirror.Pos(line: integer, ?ch: integer, ?sticky: string)

用于表示编辑器文档中位置的对象的构造函数。sticky默认为null,但可以设置为"before" 或"after"使位置与字符之前或之后显式关联。

CodeMirror.changeEnd(change: object) → {line, ch}

该计算从一个变化的结束位置(与对象效用函数fromtotext特性,作为传递给各个事件处理程序)。应用更改,返回的位置将是更改范围的结尾。

CodeMirror.countColumn(line: string, index: number, tabSize: number) → number

使用给定的制表符查找给定字符串索引处的列位置。

插件

addon在分布目录中包含了许多额外的实现功能的编辑器(在扩展功能,顶部像可重用组件defineOptiondefineExtensionregisterHelper)。简而言之,它们是:

dialog/dialog.js

提供一种查询用户文本输入的简单方法。将openDialog(template, callback, options) → closeFunction方法添加到CodeMirror实例,可以使用HTML片段或提供提示(应包含input 或button标记)的分离DOM节点以及用户按Enter时调用的回调函数来调用该实例。它返回一个函数closeFunction ,如果调用它将立即关闭对话框。openDialog采用以下选项:

closeOnEnter: bool

如果为true,则当用户在输入中按Enter键时,将关闭对话框。默认为true

closeOnBlur: bool

确定对焦失去焦点时是否关闭对话框。默认为true

onKeyDown: fn(event: KeyboardEvent, value: string, close: fn()) → bool

每当keydown在对话框的输入中触发时将调用的事件处理程序。如果您的回调返回true,则对话框将不会对事件进行任何进一步处理。

onKeyUp: fn(event: KeyboardEvent, value: string, close: fn()) → bool

onKeyDown此 keyup事件相同。

onInput: fn(event: InputEvent, value: string, close: fn()) → bool

onKeyDown此 input事件相同。

onClose: fn(instance)

在关闭对话框并从DOM中删除后将调用的回调。没有回报价值。

还添加了一个openNotification(template, options) → closeFunction函数,它只是在编辑器顶部显示一个HTML片段作为通知。它只需一个选项:duration,通知将自动关闭的时间量。如果 duration为零,则不会自动关闭对话框。

取决于addon/dialog/dialog.css

search/searchcursor.js

将该getSearchCursor(query, start, options) → cursor方法添加到CodeMirror实例,该实例可用于实现搜索/替换功能。query 可以是正则表达式或字符串。start 提供搜索的起始位置。它可以是一个{line, ch}对象,也可以保持默认为文档的开头。options是一个可选对象,它可以包含属性`caseFold:false`以在匹配字符串时禁用大小写折叠,或者属性`multiline:disable`来禁用正则表达式的多行匹配(这可能有助于提高性能)。搜索光标具有以下方法:

findNext() → boolean

findPrevious() → boolean

从当前位置向前或向后搜索。返回值表示是否找到匹配项。如果匹配正则表达式,则返回值将是match方法返回的数组,以防您要提取匹配的组。

from() → {line, ch}

to() → {line, ch}

这些仅在最后一次调用findNextfindPrevious没有返回false时有效。它们将返回{line, ch} 指向匹配开始和结束的对象。

replace(text: string, ?origin: string)

用给定文本替换当前找到的匹配项,并调整光标位置以反映替换项。

search/search.js

实现搜索命令。默认情况下,CodeMirror具有绑定到这些键的键,但除非提供实现,否则它们不会对它们执行任何操作。取决于searchcursor.js,并将利用openDialog可用时提示搜索查询不那么难看。

search/jump-to-line.js

实现jumpToLine命令并绑定Alt-G它。接受linenumber+/-linenumberline:charscroll%:linenumber格式。这将利用openDialog 可用时提示行号更整洁。

search/matchesonscrollbar.js

showMatchesOnScrollbar向编辑器实例添加一个方法,该方法应该给出一个查询(字符串或正则表达式),可选的case-fold标志(仅适用于字符串),以及可选的类名(默认为CodeMirror-search-match)作为参数。调用时,给定查询的匹配将显示在编辑器的垂直滚动条上。该方法返回一个对象,该对象具有clear可以调用以删除匹配的方法。取决于annotatescrollbar 插件,该matchesonscrollbar.css 文件提供了应用于匹配的CSS类的默认(透明黄色)定义。请注意,如果滚动条顶部和底部没有按钮,则匹配仅完全对齐。你可以使用simplescrollbar 插件以确保这一点。如果加载此插件,search插件将自动使用它。

edit/matchbrackets.js

定义一个选项matchBrackets,当设置为true或选项对象时,只要光标位于它们旁边,就会突出显示匹配的括号。它还添加了一个matchBrackets强制执行此操作的方法,以及一个findMatchingBracket可用于运行内部使用的括号查找算法的方法。它需要一个起始位置和一个可选的配置对象。默认情况下,它会在光标之前或之后找到与匹配字符的匹配(优先选择之前),但您可以使用以下选项控制其行为:

afterCursor

仅在起始位置后使用该字符,而不是在它之前的字符。

strict

仅在两个括号位于起始位置的同一侧时才会考虑匹配。

maxScanLines

在没有成功匹配的情况下扫描此数量的行后停止。默认为1000。

maxScanLineLength

忽略比这更长的行。默认为10000。

maxHighlightLineLength

不要在比此更长的行中突出显示支架。默认为1000。

edit/closebrackets.js

定义一个选项autoCloseBrackets,在键入时自动关闭括号和引号。默认情况下,它会自动关闭()[]{}''"",但您可以传递一个类似于该字符串的字符串(包含匹配字符对),或者带有一个对象pairs以及可选的explode属性来自定义它。explode应该是一个类似的字符串,它给出了一对字符,当在它们之间按下输入时,应该让第二个字符也移动到它自己的行。默认情况下,如果活动模式具有closeBrackets属性,则会覆盖该选项中给出的配置。但是,您可以添加override具有truthy值的属性以覆盖特定于模式的配置。在这里演示

edit/matchtags.js

定义一个选项matchTags,在启用时,将导致光标周围的标记突出显示(使用CodeMirror-matchingtag类)。还定义了一个命令 toMatchingTag,您可以将其绑定到一个键,以便跳转到与光标下的一个匹配的标记。取决于addon/fold/xml-fold.js 插件。在这里演示。

edit/trailingspace.js

添加一个选项showTrailingSpace,启用后,将CSS类添加cm-trailingspace到行尾的空白区域。该演示了该等级的漂亮波浪下划线样式。

edit/closetag.js

定义一个autoCloseTags选项,在键入' >'或' 时自动关闭XML标记/,以及一个关闭最近的开放标记的closeTag 命令。取决于fold/xml-fold.js插件。看演示

edit/continuelist.js

降价具体。定义一个 可以绑定的"newlineAndIndentContinueMarkdownList" 命令enter以自动插入前导字符以继续列表。请参阅Markdown模式演示

comment/comment.js

Addon用于评论和取消注释代码。向CodeMirror实例添加四种方法:

toggleComment(?options: object)

尝试取消注释当前选择,如果失败,则对其进行行注释。

lineComment(from: {line, ch}, to: {line, ch}, ?options: object)

将给定范围中的行设置为行注释。blockComment当没有为模式定义行注释样式时,将回退到。

blockComment(from: {line, ch}, to: {line, ch}, ?options: object)

在块注释中包含给定范围内的代码。lineComment当模式没有定义块注释样式时,将回退到。

uncomment(from: {line, ch}, to: {line, ch}, ?options: object) → boolean

尝试取消注释给定范围。true如果找到并删除了注释范围,则返回,false否则返回。

options这些方法接受 的对象可能具有以下属性:

blockCommentStart, blockCommentEnd, blockCommentLead, lineComment: string

使用自定义注释字符串覆盖模式的注释字符串属性

padding: string

在打开和引导标记之后以及在关闭注释标记之前插入的字符串。默认为单个空格。

commentBlankLines: boolean

添加行注释时是否还注释仅包含空格的行。

indent: boolean

添加行注释并启用此注释时,它会将注释块与块的第一行的当前缩进对齐。

fullLines: boolean

块注释时,它控制整行是缩进还是仅给出给定的精确范围。默认为true

插件还定义了一个toggleComment 命令,这是一个toggleComment没有选项的调用的简写命令 。

fold/foldcode.js

帮助代码折叠。foldCode向编辑器实例添加一个方法,该方法将尝试从给定的行开始执行代码折叠,或展开已存在的折叠。该方法将第一个参数作为应折叠的位置(可以是行号或a Pos),并将第二个可选参数作为范围查找器函数或选项对象,支持以下属性:

rangeFinder: fn(CodeMirror, Pos)

用于查找可折叠范围的函数。如果不直接传递,它会默认为CodeMirror.fold.auto,其采用getHelpers"fold"类型寻找合适的本地模式折叠功能。addon/fold/ 目录提供中有文件CodeMirror.fold.brace,它们用括号语言(JavaScript,C,Java等)查找块CodeMirror.fold.indent,用于缩进确定块结构(Python,Haskell)的CodeMirror.fold.xml语言,以及用于XML样式的语言,以及CodeMirror.fold.comment用于折叠的语言评论块。

widget: string|Element

显示折叠范围的小部件。可以是字符串,在这种情况下,它将成为带有类的span CodeMirror-foldmarker或DOM节点。

scanUp: boolean

如果为true(默认值为false),则插件将尝试在当前行上方的行上找到可折叠范围(如果给定行上没有符合条件的行。

minFoldSize: integer

折叠应该接受的最小行数。默认为0,也允许单行折叠。

有关示例,请参阅演示

fold/foldgutter.js

提供一个选项foldGutter,可用于创建带有标记的装订线,指示可折叠的块。如果您将插件配置为使用不同的类,则使用该gutters选项创建一个装订线,为其提供类CodeMirror-foldgutter或其他内容,此插件将在折叠和可折叠块旁边显示标记,并处理此装订线中的点击。请注意,应该应用CSS样式以使阴沟和其中的折叠标记可见。一组默认的CSS样式可用于: 。该选项可以设置为,也可以是包含以下可选选项字段的对象: addon/fold/foldgutter.css true

gutter: string

排水沟的CSS类。默认为"CodeMirror-foldgutter"。你必须自己设计风格,给它一个宽度(可能还有背景)。请参阅上面的默认装订线样式规则。

indicatorOpen: string | Element

CSS类或DOM元素,用作打开的可折叠块的标记。默认为"CodeMirror-foldgutter-open"

indicatorFolded: string | Element

CSS类或DOM元素,用作折叠块的标记。默认为"CodeMirror-foldgutter-folded"

rangeFinder: fn(CodeMirror, Pos)

在确定是否可以折叠某物时使用的测距仪功能。未给出时,CodeMirror.fold.auto 将用作默认值。

foldOptions编辑选项可以被设置为一个目的是提供一种编辑器范围内的默认配置。在这里演示。

runmode/runmode.js

可用于在文本上运行CodeMirror模式,而无需实际打开编辑器实例。有关示例,请参阅演示。该文件的备用版本可用于独立运行 (不包括所有CodeMirror)以及在node.js下运行bin/source-highlight有关使用后者的示例,请参阅参考资料)。

runmode/colorize.js

提供一种方便的方法来在网页中语法高亮显示代码段。取决于runmode插件(或其独立变体)。提供CodeMirror.colorize可以使用表示代码片段的DOM节点的数组(或其他array-ish集合)调用的函数。默认情况下,它会获得所有pre标签。将读取data-lang 这些节点的属性以找出它们的语言,并使用相关的CodeMirror模式对其内容进行语法着色(您必须自己加载相关模式的脚本)。可以提供第二个参数以给出默认模式,在没有找到节点的语言属性时使用。在本手册中用于突出显示示例代码。

mode/overlay.js

可以用于扩展具有“覆盖”的模式的模式组合器 - 在流上运行辅助模式以及基本模式,并且可以在不干扰基本模式的情况下对特定文本进行着色。定义CodeMirror.overlayMode,用于创建此类模式。有关详细示例,请参阅此演示

mode/multiplex.js

模式组合器,可用于在多种模式之间轻松“复用”。定义CodeMirror.multiplexingMode当作为第一个参数给出模式对象时,以及作为其他参数的任意数量的{open, close, mode [, delimStyle, innerStyle, parseDelimiters]} 对象,将返回一个模式对象,该对象使用作为第一个参数传递的模式开始解析,但是一旦遇到字符串就会切换到另一个模式发生在open传递的对象的一个字段中。当处于子模式时,close遇到字符串时它将再次返回到顶部模式。通过"\n"open或者close ,如果你想在一个空行切换。

  • delimStyle指定时,它会为定界符令牌返回(以及令牌样式 [delimStyle]-open在开口令牌并 [delimStyle]-close在封闭令牌)。
  • innerStyle指定时,这将是增加了每个内部令牌模式令牌样式。
  • 如果parseDelimiters为true,则分隔符的内容也将传递到内部模式。(delimStyle并被忽略。)

外部模式不会看到分隔符之间的内容。有关示例,请参阅此演示

hint/show-hint.js

提供显示自动完成提示的框架。定义editor.showHint,它接受一个可选的选项对象,并弹出一个允许用户选择完成的小部件。使用提示函数(hint选项)查找提示,该函数采用编辑器实例和选项对象,并返回一个{list, from, to}对象,其中list 是一个字符串或对象数组(完成),fromto给出开始和作为{line, ch} 对象完成的令牌的结尾。可以将可选selectedHint属性(整数)添加到完成对象以控制最初选择的提示。

如果没有给出提示功能,插件将使用CodeMirror.hint.autogetHelpers使用该"hint"类型调用以查找适用的提示功能,并逐个尝试。如果失败,它会寻找"hintWords"帮助程序来获取模式的CodeMirror.hint.fromList可完成单词列表,并使用它来完成。

当完成不是简单的字符串时,它们应该是具有以下属性的对象:

text: string

完成文本。这是唯一必需的财产。

displayText: string

应在菜单中显示的文本。

className: string

要应用于菜单中完成行的CSS类名称。

render: fn(Element, self, data)

用于创建DOM结构以通过将其附加到其第一个参数来显示完成的方法。

hint: fn(CodeMirror, self, data)

用于实际应用完成的方法,而不是默认行为。

from: {line, ch}

可选的from位置,pick()而不是通过完整的完成列表传递的全局位置。

to: {line, ch}

可选的to位置,pick()而不是通过完整的完成列表传递的全局位置。

该插件可以理解以下选项,这些选项可以直接在参数中传递,也可以showHint通过将hintOptions编辑器选项设置为对象来提供(前者优先)。options对象也将传递给提示函数,该函数可以理解其他选项。

hint: function

提示函数,如上所述。可以将async提示函数的属性设置为true,在这种情况下,它将使用参数调用(cm, callback, ?options),并且只有在提示函数调用回调时才会弹出完成界面,并将包含完成的对象传递给它。提示函数也可以返回一个promise,只有在promise解析时才会弹出完成界面。默认情况下,提示仅在没有选择时有效。您可以为提示函数提供一个supportsSelection具有truthy值的属性,以指示它支持选择。

completeSingle: boolean

确定当只有一个完成可用时,是否在没有显示对话框的情况下完成。默认为true。

alignWithWord: boolean

弹出窗口是否应与单词的开头(true,默认)或光标(false)水平对齐。

closeOnUnfocus: boolean

启用时(默认设置),当编辑器未聚焦时,弹出窗口将关闭。

customKeys: keymap

允许您在弹出窗口处于活动状态时提供要激活的键的自定义键映射。该处理器将使用一个额外的参数,一个手柄来完成菜单,被称为拥有moveFocus(n)setFocus(n)pick(),和close()方法(详见源),可以用来改变聚焦元素,挑当前元素或关闭菜单。此外,menuSize() 您还可以访问当前下拉菜单的大小,length为您提供可用的完成次数,并 data让您完全访问提示功能返回的完成。

extraKeys: keymap

就像customKeys上面,但绑定将被添加到该组的默认绑定,而不是取代它们。

完成期间将在完成对象上触发以下事件:

"shown" ()

显示弹出窗口时触发。

"select" (completion, Element)

选择完成时触发。传递完成值(字符串或对象)以及在菜单中表示它的DOM节点。

"pick" (completion)

选择完成时被触发。传递完成值(字符串或对象)。

"close" ()

完成后触发。

这个插件取决于来自的样式addon/hint/show-hint.css。查看演示示例。

hint/javascript-hint.js

为JavaScript(CodeMirror.hint.javascript)和CoffeeScript(CodeMirror.hint.coffeescript)代码定义一个简单的提示函数。这将简单地使用编辑器运行的JavaScript环境作为有关对象及其属性的信息源。

hint/xml-hint.js

定义CodeMirror.hint.xml,生成XML标记名,属性名称和属性值的提示,由schemaInfo选项(传递给提示函数的第二个参数的属性或传递给的第三个参数CodeMirror.showHint)引导。
模式信息应该是将标记名称映射到有关这些标记的信息的对象,可选地"!top"包含一个包含有效顶级标记名称列表的属性。属性的值应该是具有可选属性的对象children(有效子元素名称的数组,省略以简单地允许所有标记出现)和attrs(对象映射属性名称为null对于自由格式属性,以及受限属性的有效值数组)。
提示选项接受其他属性:

matchInMiddle: boolean

确定键入的字符是否在完成中的任何位置匹配,而不仅仅在开头。默认为false。

在这里演示

hint/html-hint.js

为HTML文档的xml-hint插件提供架构信息。定义CodeMirror.htmlSchema可以作为schemaInfo选项传递给的模式对象,以及使用此模式数据CodeMirror.hint.html自动调用的提示函数CodeMirror.hint.xml。看演示

hint/css-hint.js

CSS,SCSS或LESS代码的提示功能。定义CodeMirror.hint.css

hint/anyword-hint.js

一个非常简单的提示函数(CodeMirror.hint.anyword),它只是查找附近代码中的单词并完成这些单词。采用两个可选选项,word即匹配单词(一个或多个字符的序列)的正则表达式,以及range定义插件在完成时应扫描的行数(默认为500)。

hint/sql-hint.js

一个简单的SQL hinter。定义CodeMirror.hint.sql。采用两个可选选项,tables一个具有表名作为键的对象和各个列名称的数组作为值,以及defaultTable一个与tables自动完成中的表名对应的字符串。

search/match-highlighter.js

添加一个highlightSelectionMatches选项,可以启用该选项以突出显示当前所选单词的所有实例。可以设置为true或包含以下选项的对象:minChars,对于触发突出显示的最小选定字符数(默认style值为2),用于突出显示匹配的样式(默认值"matchhighlight",对应于CSS类cm-matchhighlight),trim它控制是否从选择中修剪空白,以及showToken可以设置为true 与构成单词的字符匹配的正则表达式。启用后,它会在未选择任何内容时突出显示当前单词(默认为关闭)。在这里演示。

lint/lint.js

定义了一个接口部件用于显示掉毛的警告,与可插拔警告来源(参见html-lint.js, json-lint.js, javascript-lint.js, coffeescript-lint.js,和css-lint.js在同一目录中)。定义一个lint可以设置为注释源(例如CodeMirror.lint.javascript),选项对象(在这种情况下该getAnnotations字段用作注释源)的选项,或者简单地用于true。如果未指定注释源,则getHelper使用type "lint"来查找注释函数。注释源函数在给定文档字符串,选项对象和编辑器实例时,应返回一个数组{message, severity, from, to}表示问题的对象。当函数具有async带有truthy值的属性时,将使用另外的第二个参数调用它,该参数是将数组传递给的回调函数。linting函数也可以返回一个promise,在这种情况下,linter只会在promise解析时执行。默认情况下,只要文档发生更改,linter就会运行(去抖动)。您可以传递一个lintOnChange: false选项来禁用它。取决于addon/lint/lint.css。可以在这里找到演示。

selection/mark-selection.js

启用CodeMirror-selectedtextstyleSelectedText选项后,将使用CSS类标记所选文本。用于更改选择的颜色(除了背景),就像在此演示中一样

selection/active-line.js

定义一个styleActiveLine选项,在启用时,为包含光标的行提供包装,为类CodeMirror-activeline添加背景,并将类CodeMirror-activeline-background添加CodeMirror-activeline-gutter到行的装订线空间中。选项的值可以是布尔值或指定以下选项的对象:

nonEmpty: bool

控制是否设置单行选择或仅选择光标选择。默认为false(仅限光标选择)。

演示

selection/selection-pointer.js

定义一个selectionPointer选项,可以在将鼠标悬停在选区上时控制鼠标光标外观。它可以设置为字符串,例如"pointer",或者设置为true,在这种情况下,"default"将使用(箭头)光标。你可以在这里看到一个演示。

mode/loadmode.js

定义一个CodeMirror.requireMode(modename, callback)函数,该函数将尝试加载给定模式并在成功时调用回调。你必须设置CodeMirror.modeURL一个字符串,模式路径可以构造,例如"mode/%N/%N.js"%N它将被替换为模式名称。还定义了CodeMirror.autoLoadMode(instance, mode),它将确保加载给定模式,并在加载成功时使给定的编辑器实例刷新其模式。看演示

mode/meta.js

在单个文件中提供有关分发中所有模式的元信息。定义CodeMirror.modeInfo具有{name, mime, mode}属性的对象数组,其中name包含人类可读的名称,mimeMIME类型以及mode定义此MIME的模式文件的名称。有可选属性mimes,它包含与多个MIME关联的模式的MIME类型数组,并且ext包含与此模式关联的文件扩展名数组。四个方便的功能,CodeMirror.findModeByMIME, CodeMirror.findModeByExtensionCodeMirror.findModeByFileName 和CodeMirror.findModeByName提供,返回给定MIME,扩展名,文件名或模式名称字符串的对象。请注意,由于历史原因,此文件位于顶级mode目录中,而不在下addon演示

comment/continuecomment.js

添加一个continueComments选项,设置当您在注释块中按Enter键时编辑器是否会使下一行继续注释。可以设置为布尔值以启用/禁用此功能。设置为字符串,它将使用自定义快捷方式继续注释。设置为一个对象,它将使用该key属性作为自定义快捷方式,并使用boolean continueLineComment 属性来确定是否应继续单行注释(默认为true)。

display/placeholder.js

添加一个placeholder选项,可用于在内容为空且未聚焦时使内容显示在编辑器中。它可以包含字符串或DOM节点。CodeMirror-empty每当它不包含任何文本时,也为编辑器提供CSS类。看演示

display/fullscreen.js

定义一个选项fullScreen,当设置为true,将使编辑器全屏(如,占据整个浏览器窗口)。取决于fullscreen.css在这里演示

display/autorefresh.js

refresh在编辑器变得可见时难以调用的情况下,在隐藏DOM节点中初始化编辑器时,此插件非常有用。它定义了一个autoRefresh 可以设置为true 的选项,以确保如果编辑器在初始化时不可见,它将在第一次可见时刷新。这是通过每250毫秒轮询完成的(您可以传递一个值{delay: 500}作为选项值来配置它)。请注意,这个插件将只刷新编辑器一旦当它第一次变得可见,并不会照顾进一步的改型和调整大小的。

scroll/simplescrollbars.js

定义了两个额外的滚动条模型,"simple"并且"overlay" (参见演示)可以使用该scrollbarStyle 选项进行选择。取决于simplescrollbars.css,可以进一步覆盖以设置自己的滚动条样式。

scroll/annotatescrollbar.js

提供在滚动条上显示标记以调出文档某些部分的功能。annotateScrollbar向可以使用CSS类名作为参数调用的编辑器实例添加方法,以创建一组注释。该方法返回一个对象,该对象的update方法可以使用排序的{from: Pos, to: Pos}对象数组来标记要突出显示的范围。要分离注释,请调用对象的clear方法。

display/rulers.js

添加一个rulers选项,可用于在编辑器中显示一个或多个垂直标尺。如果定义了该选项,则应该给出一个{column [, className, color, lineStyle, width]}对象或数字数组(表示一列)。标尺将显示在数字或column属性指示的列上。该className属性可用于将自定义样式指定给标尺。在这里演示

display/panel.js

addPanel为CodeMirror实例定义一个方法,该方法将DOM节点放在编辑器的上方或下方,并缩小编辑器以为节点腾出空间。该方法将第一个参数作为DOM节点,第二个参数作为可选的选项对象。Panel此方法返回的对象具有clear用于删除面板的changed方法,以及可用于在面板的DOM节点大小发生更改时通知插件的方法。
该方法接受以下选项:

position: string

控制新添加的面板的位置。识别以下值:

top (default)

在最顶部添加面板。

after-top

在顶部面板的底部添加面板。

bottom

在最底部添加面板。

before-bottom

在底部面板的顶部添加面板。

before: Panel

新面板将在给定面板之前添加。

after: Panel

新面板将在给定面板后添加。

replace: Panel

新面板将取代给定的面板。

stable: bool

当在其上方添加面板时,是否滚动编辑器以使文本的垂直位置保持稳定。默认为false。

当使用afterbeforereplace选择,如果小组不存在或已被移除时,的值position选项将被用作回退。 这里
有一个插件演示。

wrap/hardwrap.js

Addon为文本段落执行硬线包装/分解。将这些方法添加到编辑器实例:

wrapParagraph(?pos: {line, ch}, ?options: object)

将段落包含在给定位置。如果pos未给出,则默认为光标位置。

wrapRange(from: {line, ch}, to: {line, ch}, ?options: object)

将给定范围包含为一个大段。

wrapParagraphsInRange(from: {line, ch}, to: {line, ch}, ?options: object)

单独包装给定范围内的段落(并重叠)。

可识别以下选项:

paragraphStartparagraphEnd: RegExp

空行始终被视为段落边界。这些选项可用于指定使行被视为段落的开头或结尾的模式。

column: number

要包装的列。默认为80。

wrapOn: RegExp

一个正则表达式,仅匹配允许换行的那两个字符的字符串。默认情况下,插件包装在空格和破折号字符之后。

killTrailingSpace: boolean

是否应保留或删除由包装引起的尾随空格。默认为true。

这里 有一个插件演示。

merge/merge.js

使用2向或3向视图实现合并更改的接口。所述CodeMirror.MergeView 构造函数采用类似的参数CodeMirror 构造,第一节点追加的界面,然后一个选项对象。选项将传递给视图中的编辑器。这些额外选项得到认可:

origLeft 和 origRight: string

如果给定,则提供文档的原始版本,该版本将在不可编辑的CodeMirror实例中显示在编辑器的左侧和右侧。合并界面将突出显示可编辑文档与原始文档之间的更改。要创建双向(而不是3向)合并视图,请仅提供其中一个。

revertButtons: boolean

确定是否显示允许用户还原更改的按钮。默认为true。

revertChunk: fn(mv: MergeView, from: CodeMirror, fromStart: Pos, fromEnd: Pos, to: CodeMirror, toStart: Pos, toEnd: Pos)

当用户还原已更改的块时,可用于定义自定义行为。

connect: string

设置用于连接已更改的代码块的样式。默认情况下,绘制连接器。当设置"align"为时,较小的块被填充以与较大的块对齐。

collapseIdentical: boolean|number

如果为true(默认值为false),则将折叠未更改的文本。给出一个数字时,这表示在这些延伸周围可见的线条数量(默认为2)。

allowEditingOriginals: boolean

确定原始编辑器是否允许编辑。默认为false。

showDifferences: boolean

如果为true(默认值),则会突出显示已更改的文本。

chunkClassLocation: string|Array

默认情况下,使用addLineClass “background” 添加块高亮显示。重写此选项以将其自定义为任何有效的`where`参数或有效`where`参数的数组。

插件还定义了命令"goNextDiff" 并"goPrevDiff"快速跳转到下一个更改的块。在这里演示

tern/tern.js

提供与Tern JavaScript分析引擎的集成,用于完成,定义查找和次要重构帮助。请参阅演示 以获得非常简单的集成。有关更多参与方案,请参阅插件顶部的注释以及Tern网站上(多文件)演示的实现

编写CodeMirror模式

模式通常由单个JavaScript文件组成。在最简单的情况下,此文件定义了语言的词法分析器(标记化器) - 一种将字符流作为输入的函数,使其超过标记,并返回该标记的样式。更高级的模式也可以处理语言的缩进。

本节介绍低级模式接口。许多模式都直接针对此编写,因为它提供了很多控制,但是对于快速模式定义,您可能希望使用简单模式插件

模式脚本应调用CodeMirror.defineMode以向CodeMirror注册自身。该函数有两个参数。第一个应该是模式的名称,您应该使用小写字符串,最好是一个也是定义模式的文件的名称(即"xml"在其中定义xml.js)。第二个参数应该是一个函数,给定CodeMirror配置对象(传递给CodeMirror函数的东西)和可选模式配置对象(如mode选项中),返回一个模式对象。

通常,您应该使用第二个参数defineMode作为模块范围函数(模式不应该泄漏到全局范围内!),即在整个函数中写入整个模式。

模式脚本的主要职责是解析 编辑器的内容。根据所需的语言和功能数量,这可以通过非常简单或极其复杂的方式完成。一些解析器可以是无状态的,这意味着它们一次查看代码的一个元素(标记),而不记录之前的内容。然而,大多数人需要记住一些事情。这是通过使用状态对象来完成的,状态对象是在读取令牌时始终传递的对象,并且可以由令牌化程序进行突变。

使用状态的模式必须startState在其模式对象上定义方法。这是一个没有参数的函数,它产生一个在文档开头使用的状态对象。

模式对象最重要的部分是它的token(stream, state)方法。所有模式都必须定义此方法。它应该从流中读取一个标记作为参数,可选地更新其状态,返回样式字符串,或者null不必设置样式的标记。对于您的样式,建议您使用主题中定义的“标准”名称(不带cm-前缀)。如果失败了,也可以自己编写并编写自己的CSS主题文件。

典型的令牌字符串是"variable""comment"。可以返回多个样式(用空格分隔),例如"string error"对于看起来像字符串但在某种程度上无效的东西(比如,缺少其结束引号)。当样式以"line-" or 作为前缀时"line-background-",样式将应用于整行,类似于addLineClass方法"text"在简单情况下的样式,以及在前缀"background"时的元素"line-background-"

传递给它的流对象token封装了一行代码(令牌可能永远不会跨越行)以及我们当前在该行中的位置。它具有以下API:

eol() → boolean

仅当流位于行的末尾时才返回true。

sol() → boolean

仅当流位于行的开头时才返回true。

peek() → string

返回流中的下一个字符而不提前它。将null在行尾返回a 。

next() → string

返回流中的下一个字符并前进。null当没有更多字符可用时也返回。

eat(match: string|regexp|function(char: string) → boolean) → string

match可以是一个字符,一个正则表达式,或一个接受一个字符并返回一个布尔值的函数。如果流中的下一个字符'匹配'给定的参数,则消耗并返回它。否则,undefined 返回。

eatWhile(match: string|regexp|function(char: string) → boolean) → boolean

eat使用给定的参数重复调用,直到失败。如果吃了任何字符,则返回true。

eatSpace() → boolean

eatWhile匹配空白时的快捷方式。

skipToEnd()

将位置移动到行尾。

skipTo(str: string) → boolean

如果在当前行上找到,则跳到给定字符串的下一次出现的开始(如果该行没有出现字符串,则不提前流)。如果找到该字符串,则返回true。

match(pattern: string, ?consume: boolean, ?caseFold: boolean) → boolean

match(pattern: regexp, ?consume: boolean) → array<string>

像多字符一样eat- 如果consume是真或不给定 - 或者是不更新流位置的前瞻 - 如果它是假的。pattern可以是字符串或以^。开头的正则表达式。当它是一个字符串时,caseFold可以设置为true以使匹配不区分大小写。成功匹配正则表达式后,match如果需要提取匹配的组,则返回的值将是返回的数组。

backUp(n: integer)

备份流n字符。比当前令牌的开始更多地备份将导致事情中断,所以要小心。

column() → integer

返回当前令牌开始的列(考虑选项卡)。

indentation() → integer

告诉你当前行在空格中缩进了多远。更正制表符。

current() → string

获取当前令牌的开头和当前流位置之间的字符串。

lookAhead(n: number) → ?string

获取n当前行之后的行(> 0)行,以便跨越行边界向前扫描。请注意,您需要仔细执行此操作,因为向前看会使模式状态缓存效率降低。

baseToken() → ?{type: ?string, size: number}

通过addOverlay (并且此类模式)添加的模式可以使用此方法来检查由基础模式生成的当前令牌。

默认情况下,在标记文档时,只会跳过空白行。对于具有重要空白行的语言,您可以blankLine(state)在模式上定义一个方法,只要空白行被传递就会调用该方法,以便它可以更新解析器状态。

因为状态对象是变异的,并且CodeMirror需要保持状态的有效版本,以便它可以在任何行重新启动解析,所以必须由状态对象创建副本。使用的默认算法是创建一个新的状态对象,它获取旧对象的所有属性。任何保存数组的属性都会获得这些数组的副本(因为数组往往被用作可变堆栈)。如果这不正确,例如因为模式改变了其状态对象的非数组属性,模式对象应该定义一个copyState方法,该方法被赋予一个状态并应该返回该状态的安全副本。

如果你希望你的方式来提供智能缩进(通过indentLine 方法与indentAuto 和newlineAndIndent命令,到密钥可以 绑定),你必须定义indent(state, textAfter)你的模式对象的方法。

缩进方法应该检查给定的状态对象,并且可选地检查textAfter包含正在缩进的行上的文本的字符串,并返回一个整数,即缩进的空格量。通常应该考虑indentUnit 选项。缩进方法可能会返回CodeMirror.Pass以指示它无法提供精确的缩进。

与做工精良评论插件,一个模式可以定义lineComment(字符串开头的行注释)blockCommentStartblockCommentEnd (字符串,开始和结束块注释),和blockCommentLead(一个字符串在连续行的起点放在一个块注释)。所有这些都是可选的。

最后,模式可以定义一个electricChars或一个electricInput 属性,用于在键入某些模式并electricChars 启用该选项时自动重新加入该行。electricChars可以是一个字符串,只要键入该字符串中的一个字符,就会触发一个重新调用。通常,使用它更合适electricInput,它应该包含正则表达式,并且当光标之前的行部分与表达式匹配时将触发缩进。它通常应该以一个$字符结尾,这样它只在刚刚输入缩进变化模式时匹配,而不是在模式后输入某些内容时匹配。

因此,要总结,模式必须提供一个token方法,它可以 提供startStatecopyStateindent方法。有关普通模式的示例,请参阅diff模式,有关更多参与示例,请参阅类似C的模式

有时,嵌套模式很有用- 让一个模式委托工作到另一个模式。这种模式的一个例子是混合模式HTML模式。要实现此类嵌套,通常需要自己创建模式对象和复制状态。要创建模式对象,CodeMirror.getMode(options, parserConfig)第一个参数是传递给模式构造函数的配置对象,第二个参数是mode选项中的模式规范。要复制状态对象,请调用CodeMirror.copyState(mode, state),其中mode是创建给定状态的模式。

在嵌套模式下,建议添加一个额外的方法,innerMode在给定状态对象的情况下,该方法返回{state, mode}具有内部模式的对象及其当前位置的状态。这些由实用程序脚本(如标记)使用,以获取上下文信息。使用CodeMirror.innerMode辅助函数,从模式和状态开始,递归地向下走到最里面的模式和状态。

为了使嵌套解析器中的缩进正常工作,建议为嵌套startState的模式方法提供一个可选参数,该参数为代码块提供基本缩进。例如,JavaScript和CSS解析器执行此操作,以允许混合模式HTML模式中的JavaScript和CSS代码正确缩进。

可以并且鼓励将您的模式或模式的某个配置与MIME类型相关联。例如,JavaScript模式将自身text/javascript与其JSON变体相关联application/json。要执行此操作,请调用CodeMirror.defineMIME(mime, modeSpec),其中modeSpec可以是指定模式的字符串或对象,如mode选项中所示。

如果模式规范想要将某些属性添加到生成的模式对象(通常与其一起使用)getHelpers,则它可能包含一个modeProps包含对象的属性。此对象的属性将复制到实际模式对象。

有时,从外部代码添加或覆盖模式对象属性很有用。该CodeMirror.extendMode函数可用于向为特定模式生成的模式对象添加属性。它的第一个参数是模式的名称,第二个参数是指定应添加的属性的对象。这对于添加以后可以查看的实用程序非常有用getMode

VIM模式API

CodeMirror具有强大的VIM模式,试图忠实地模拟VIM最有用的功能。可以通过包含keymap/vim.js 和设置keyMap选项来 启用它"vim"

组态

VIM模式接受用于在运行时自定义行为的配置选项。除非另有说明,否则可以随时调用这些方法并影响所有现有的CodeMirror实例。方法暴露在 CodeMirror.Vim对象上。

setOption(name: string, value: any, ?cm: CodeMirror, ?cfg: object)

设置VIM选项的值。name应该是选项的名称。如果cfg.scope未设置并cm提供,则设置选项的全局值和实例值。否则,根据是否cfg.scopeglobal或 设置选项的全局值或实例值 local

getOption(name: string, ?cm: CodeMirror: ?cfg: object)

获取VIM选项的当前值。如果 cfg.scope未设置并且cm已提供,则获取选项的实例值,如果未设置则返回到全局值。如果cfg.scope提供,则获取global或 local值而不检查另一个。

map(lhs: string, rhs: string, ?context: string)

将键序列映射到另一个键序列。实现VIM的:map命令。来图; to:在VIM中 :map ; :。这将转化为 CodeMirror.Vim.map(';', ':');。的context可以是normal, visual,或insert,其中以对应:nmap:vmap和 :imap 分别。

mapCommand(keys: string, type: string, name: string, ?args: object, ?extra: object)

映射一个键序列到一个motion, operatoraction类型的命令。当args对象被提供的键序列调用时,它将被传递给命令。 extras.context可以是normal, visual或者insert,仅在相应模式下映射键序列。 extras.isEdit仅适用于操作,确定是否为.单重复命令记录重放 。

扩展VIM

CodeMirror的VIM模式实现了VIM核心编辑功能的大部分。但由于总有更多需要,因此有一组用于扩展VIM功能的API。与配置API一样,这些方法是公开的CodeMirror.Vim,可以随时调用。

defineOption(name: string, default: any, type: string, ?aliases: array<string>, ?callback: function (?value: any, ?cm: CodeMirror) → ?any)

定义VIM样式选项并使其可用于该 :set命令。类型可以是boolean或 string用于验证,以及 :set确定接受哪种语法。如果callback传入a ,则VIM不会存储选项本身的值,而是将回调用作setter / getter。如果回调的第一个参数是undefined,则回调应返回该选项的值。否则,它应该设置。由于VIM选项具有全局值和实例值,因此是否 CodeMirror传入实例表示是否应使用全局值或本地值。因此,可以为单个setOption或 两次调用两次回调getOption呼叫。请注意,目前,VIM不支持定义没有全局值的缓冲区本地选项。如果选项不应具有全局值,则要么始终忽略cm回调中的 参数,要么始终传入 cfg.scopeto setOption和 getOption

defineMotion(name: string, fn: function(cm: CodeMirror, head: {line, ch}, ?motionArgs: object}) → {line, ch})

为VIM定义动作命令。运动应返回光标所需的结果位置。head 是光标的当前位置。它可能与cm.getCursor('head')VIM处于可视模式时有所不同 。 motionArgs是传入的对象 mapCommand()

defineOperator(name: string, fn: function(cm: CodeMirror, ?operatorArgs: object, ranges: array<{anchor, head}>) → ?{line, ch})

定义一个操作员命令,类似于 defineMotionranges是操作员应该操作的文本范围。如果在操作完成后光标应设置到某个位置,则可以返回光标对象。

defineAction(name: string, fn: function(cm: CodeMirror, ?actionArgs: object))

定义一个动作命令,类似于 defineMotion。动作命令可以具有任意行为,使它们比运动和操作符更灵活,同时丧失正交性。

defineEx(name: string, ?prefix: string, fn: function(cm: CodeMirror, ?params: object))

定义Ex命令,并将其映射到:name。如果提供了前缀,则可以使用它和name开头的任何前缀子字符串 prefix来调用该命令。如果prefix是假的,则name用作前缀。params.argString包含命令名后面提示字符串的一部分。params.argsparams.argString由空格分开。如果命令是用前缀 line range, params.lineparams.lineEnd将被设置。

猜你喜欢

转载自blog.csdn.net/xiaohxx/article/details/89761737