CodeMirror中文说明文档

文档大纲

本文档并未完全翻译完成,我需要你的帮助。前往GitHub编辑

插件

该部分包含一系列可复用的组件,能用来为编辑器扩展额外的功能(类似 defineOptiondefineExtension,和 registerHelper)。如下:

dialog/dialog.js
提供一种非常简单的方式来查询用户的文本输入。 添加 openDialog(template, callback, options) → closeFunction 函数给 CodeMirror 对象, 可以由 inputbutton 标签调用,返回一个处理用户出入的回调函数。 返回值 closeFunction 函数,调用该函数将立刻关闭对话框。 openDialog 的参数:
closeOnEnter: bool
默认为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
onInput: fn(event: InputEvent, value: string, close: fn()) → bool
onKeyDown
onClose: fn(instance):
对话框关闭后的回调函数。无返回值。

新增 openNotification(template, options) → closeFunction 函数,在编辑器的顶部添加 HTML 片段来显示提示。 选项只有一个参数: duration 提示自动关闭的时间。 duration 为0时不自动关闭。

依赖 addon/dialog/dialog.css

search/searchcursor.js
新增 getSearchCursor(query, start, options) → cursor 函数,用来实现搜索和替换功能。 query 可为正则表达式。 start 为匹配的起始位置,可以是 {line, ch} 对象,或省略该参数使用默认值,文档的开始。 options 对象可选,包含 `caseFold: false` 属性来忽视大小写,包含 `multiline: disable` 属性来关闭多行匹配(可提高性能)。 该对象有以下函数:
findNext() → boolean
findPrevious() → boolean
上一个或下一个搜索结果。 返回值表示是否搜索到结果。 使用正则搜索时,返回值是一个由 match 函数返回的数组,可以用来提取匹配到的组。
from() → {line, ch}
to() → {line, ch}
这两个函数只有在 findNextfindPrevious 返回 fasle 时有用。 返回 {line, ch} 对象指向匹配的开始和结束。
replace(text: string, ?origin: string)
使用提供的文本替换当前的匹配结果,并调整光标的位置到替换处。
实现搜索命令。CodeMirror 默认会绑定快捷键,但不会处理该事件。 依赖于 searchcursor.js ,并且会调用 openDialog 来美化搜索界面。
search/jump-to-line.js
实现 jumpToLine 命令并绑定 Alt-G 快捷键。 接受 linenumber+/-linenumberline:charscroll%:linenumber 格式。 使用 openDialog 来使行号提示更整洁。
search/matchesonscrollbar.js
新增 showMatchesOnScrollbar 函数,接受一个查询参数(字符串或正则表达式), 可选折叠标志(只用于字符串),可选class名(默认)CodeMirror-search-match。 调用时,把所有匹配结果显示在编辑器的垂直滚动条上。 该函数返回对象里的 clear 函数可以用来清除匹配。 依赖 annotatescrollbar 插件, 和 matchesonscrollbar.css 文件,提供一个默认的CSS定义作为匹配结果的显示。 注意只有在滚动条的上面和下面没有按钮时才能完美的显示。 你可以使用 simplescrollbar 插件来确保能完美的显示。 如果加载了该插件,search 插件会自动调用该插件。
edit/matchbrackets.js
添加 matchBrackets 选项,设置为 true 或默认时,高亮显示光标处的括号和对应的括号。 新增 matchBrackets 函数来强制一次高亮括号, 和 findMatchingBracket 函数,可用于运行内部使用的包围式查找算法。 它采用起始位置和可选的config对象。 默认情况下,它将在光标之前或之后找到匹配的可匹配字符(优先选择匹配的字符),但是您可以使用以下选项控制其行为:
afterCursor
仅在开始位置之后使用该字符,而不在其之前使用该字符.
strict
仅考虑两个方括号都位于起始位置同一侧的匹配项.
maxScanLines
在没有匹配成功的情况下,扫描此行数后停止。 默认为1000。
maxScanLineLength
忽略比这更长的行。 默认为10000
maxHighlightLineLength
不要在一行中突出显示一个比这更长的括号。 预设为1000。
edit/closebrackets.js
定义一个 autoCloseBrackets 选项,将自动补全括号和引号。 默认情况下,它将自动补全 ()[]{}''"",但是您可以向其传递与之相似的字符串(包含成对的匹配字符),或传递具有 pairs 的对象,还可以用 explode 属性自定义 。 explode 应该是一个相似的字符串,该字符串应提供成对的字符,当在它们之间按Enter键时,应该让第二个字符也移到自己的行。 默认情况下,如果活动模式具有 closeBrackets 属性,则该属性将覆盖该选项中给定的配置。 但是,您可以添加带有真实值的 override 属性以覆盖特定于模式的配置。 参考Demo
edit/matchtags.js
新增 matchTags 选项,可以让光标处的标签高亮显示(使用 CodeMirror-matchingtag 样式)。 新增 toMatchingTag 命令 , 可以绑定一个快捷键来将光标移动到闭合标签处。 依赖 addon/fold/xml-fold.js 插件。 参考Demo
edit/trailingspace.js
新增 showTrailingSpace 选项,使用 cm-trailingspace 样式标注到行位的空白。 参考使用下划线标注的 Demo
edit/closetag.js
新增 autoCloseTags 选项,当输入 '>' 或 '/' 时自动闭合 XML 标签, 新增 closeTag 命令,用来关闭打开的标签。 依赖 fold/xml-fold.js 插件。 参考 Demo
edit/continuelist.js
Markdown 的插件。 新增 "newlineAndIndentContinueMarkdownList" 命令, 按下 enter 键时自动插入列表头字符。 参考 Markdown mode demo
comment/comment.js
注释和取消注释。增加四个函数:
toggleComment(?options: object)
尝试取消选择区域的注释,如果失败,则注释该行。
lineComment(from: {line, ch}, to: {line, ch}, ?options: object)
对给定行进行行注释。 如果当前Mode未定义行注释样式,则使用 blockComment
blockComment(from: {line, ch}, to: {line, ch}, ?options: object)
对指定范围进行块注释。 如果当前Mode未定义块注释样式,则使用 lineComment
uncomment(from: {line, ch}, to: {line, ch}, ?options: object) → boolean
取消指定范围的注释。 指定范围内有注释并成功取消注释,则返回 true
这四个函数的 options 对象可包含一下属性:
blockCommentStart, blockCommentEnd, blockCommentLead, lineComment: string
使用自定义注释字符覆盖Mode的 comment 属性
padding: string
关闭注释标记之前,在打开和头标记之后插入一个字符串。默认是一个空格。
commentBlankLines: boolean
添加行注释时,判断是否为空白行进行注释。
indent: boolean
当为true时,在添加行注释时,将该行与注释快的第一行进行缩进来对齐。
fullLines: boolean
处理块注释时,该选项用来决定应该将整行缩进,还是仅缩进指定范围。 默认 true
该插件还增加了 toggleComment 命令,方便调用无配置的 toggleComment 函数。
fold/foldcode.js
折叠代码块。 新增 foldCode 函数,在指定的行处尝试折叠,或展开已折叠的代码块。 第一个参数为应该开始折叠的行(可以是行号或 Pos), 第二个可选参数可以是一个范围查找函数或一个配置对象,支持以下配置:
rangeFinder: fn(CodeMirror, Pos)
范围查找函数。 默认使用 CodeMirror.fold.auto , 即使用 getHelpers 函数来查找当前 mode 下 "fold" 类型对应的查找函数。 addon/fold/ 目录下的文件提供 CodeMirror.fold.brace, 可以在多种编程语言(JavaScript、C、Java等)中查找代码块, CodeMirror.fold.indent 用来给缩进确定代码块的编程语言(Python、Haskell), CodeMirror.fold.xml 用来给 XML 类型的变成语言查找代码块, CodeMirror.fold.comment 判断注释代码块。
widget: string | Element | fn(from: Pos, to: Pos) → string|Element
用来代表被折叠代码块的小部件。 可以是一个由 CodeMirror-foldmarker 样式修饰的字符串,或一个DOM元素。 为了动态的生成小部件,该参数可以是一个返回字符串或DOM元素的函数。 该函数被调用时,会传递需要折叠的代码块的范围。
scanUp: boolean
为 true 时(默认 false),如果指定行不可折叠,该插件会尝试从该行向上查找可折叠的代码块。
minFoldSize: integer
最少多少行可以被折叠。默认0,表示可折叠单行。
参考 Demo
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 选项可以设置为一个对象,提供大量默认配置。 参考Demo
runmode/runmode.js
不创建编辑器实例,使用 mode 渲染文本。 参考 Demo。 还有备用文件版本,addon/runmode/runmode-standalone.js 单机版(不引入CodeMirror), 和 addon/runmode/runmode.node.jsnode.js 环境(参考 bin/source-highlight)。
runmode/colorize.js
一个在网页中高亮代码的简单方法。 依赖于 runmode 插件(或它的变种)。 增加 CodeMirror.colorize 函数,参数为一个包含需要被高亮处理的DOM元素的数组(或可数组化的集合)。 默认为所有 pre 标签。 需要读取 data-lang 属性来确定它们的编程语言,和对应Mode的颜色(你需要自己引入相关Mode的依赖文件)。 第二个参数为默认的Mode,用来修饰其他元素。 本手册中就是用的该方法。
mode/overlay.js
Mode 组合器,可以在基础 Mode 上扩展一个 Mode ,在不干扰基础 Mode 的基础上高亮部分文本。 Defines CodeMirror.overlayMode, which is used to create such a mode. 定义 CodeMirror.overlayMode 来创建这样一个mode。 参考 Demo
mode/multiplex.js
Mode 组合器,可以混合多个 Mode。 定义 CodeMirror.multiplexingMode ,第一个参数为Mode对象, 第二个参数为包含 {open, close, mode [, delimStyle, innerStyle, parseDelimiters]} 任意数量的对象, 将会返回一个 Mode 对象,使用第一个参数传递的Mode来解析, 但是在遇到 open 字段中的字符串时立马切换为另一种Mode。 在子Mode中,遇到 close 定义的字符串时返回父Mode。 将 openclose 设置为 "\n" 来在遇到空白行时切换Mode。
  • 指定 delimStyle 时,会使用该样式来修饰切换关键词([delimStyle]-open 修饰开始关键词,[delimStyle]-close 修饰结束关键词)。
  • 指定 innerStyle 时,会修饰子Mode中所有的切换关键词。
  • parseDelimiters 为 true 时,切换关键词也会被定义为内部Mode(delimStyle 参数将会被忽略)。
外部Mode不会关注内部的内容。 参考 Demo
hint/show-hint.js
自动补全提示框架。 增加 editor.showHint 配置,弹出一个小部件让用户选择补全。 由参数为编辑器实例和配置的函数(hint配置)完成查找, 返回 {list, from, to} 对象,list 为字符串或对象组成的数组(补全列表), fromto 为需要替换字符串的开始与结束位置,为 {line, ch} 对象。 补全对象的 selectedHint 是可选属性(数字),用来控制默认选择的提示。
如果没有提供提示函数,插件会使用 CodeMirror.hint.auto, 基于 "hint" 类型调用 getHelpers 函数来查找可用的提示函数,并一个一个地尝试。 如果失败,将查找 "hintWords" 工具类来提取该Mode下可补全的单词,并调用 CodeMirror.hint.fromList 来完成自动补全。
当补全对象不是字符串时,应该是包含一下属性的对象:
text: string
补全文本,这是唯一必传的参数。
displayText: string
菜单中展示的文本。
className: string
菜单中补全行的CSS样式名。
render: fn(Element, self, data)
使用第一个参数来创建补全的DOM结构的函数。
hint: fn(CodeMirror, self, data)
应用补全的函数,可用来替代默认的补全函数。
from: {line, ch}
指定 pick() 的开始位置,而不是整个补全列表。
to: {line, ch}
指定 pick() 的结束位置,而不是整个补全列表。
插件可以理解以下选项,这些选项可以直接传递到 showHint 的参数中,或通过为编辑器设置 hintOptions 选项来提供(前者优先)。 options对象也将传递给提示功能,该功能可能会理解其他选项。
hint: function
补全函数。 可以将提示函数的 async 属性设置为true,在这种情况下,它将使用参数(cm, callback, ?options)进行调用, 并且仅当提示函数调用回调时才会弹出完成界面,并向回调传递包含补全对象的参数。 补全函数也可以返回 Promise 对象,当 Promise 完成时再弹出补全界面。 补全函数默认只在没有选区时启用。 你可以把 supportsSelection 属性设置为真实的值给补全函数来启用对选区的支持。
completeSingle: boolean
当只有一个补全对象可用时是否完成补全而不显示对话框。默认为true。
alignWithWord: boolean
弹出菜单应该与单词的头部对齐(默认),还是应该与光标对齐(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 样式。 参考 Demo
hint/javascript-hint.js
为 JavaScript(CodeMirror.hint.javascript)和 CoffeeScript(CodeMirror.hint.coffeescript)实现了一个简单的代码提示函数。 只提供对象及其属性的信息提示。
hint/xml-hint.js
定义 CodeMirror.hint.xml ,为 XML 标签名、属性名、属性值提供提示, 由 schemaInfo 选项控制(hinting 函数的第二个参数,或 CodeMirror.showHint 函数的第三个参数)。
该参数应该为一个定义了标签名和信息对照信息的对象, 和可选参数 "!top",包含顶级标签的名字列表。 这些参数有可选的 children 属性(由可用子类元素名子组成数组,省略时允许所有元素出现), 和 attrs 参数(null 时不作提示,和属性禁止使用的值)。
额外的属性:
matchInMiddle: boolean
是否可以在任意位置进行匹配,不只在行首处进行匹配。默认为false。
参考Demo
hint/html-hint.js
为 HTML 提供 xml 提示。 增加 CodeMirror.htmlSchema 对象,可以传递给 schemaInfo 选项, 和 CodeMirror.hint.html 命中函数,自动调用 CodeMirror.hint.xml 函数。 参考Demo
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 提示。新增 CodeMirror.hint.sql。 参数 tables,表名与其对应字段名的对象, 参数 defaultTable,自动补全对应表名的字符串。
search/match-highlighter.js
增加 highlightSelectionMatches 选项,高亮内容中所有与选择的单词一致的单词。 可以为 true 或拥有以下属性的对象: minChars,高亮处理最少的单词数量(默认2), style,高亮的样式(默认"matchhighlight"对应 cm-matchhighlight CSS样式), trim,是否应该排除选择区域前后的空白符, showToken 可为 true,或由一个单词组成的正则表达式。 为 true 时,没有选区时将当前单词高亮显示(默认关闭)。 参考Demo
lint/lint.js
为源代码增加可插拔的格式警告界面(参考addon/lint/html-lint.jsaddon/lint/json-lint.jsaddon/lint/javascript-lint.jsaddon/lint/coffeescript-lint.jsaddon/lint/css-lint.js)。 增加 lint 选项,可以是注解源(如 CodeMirror.lint.javascript), 可以是一个配置对象(包含 getAnnotations 属性作为注解源),或 true。 没有指定注解源时,使用 getHelper 函数查找类型为 "lint" 的注解函数。 注解函数的参数应该包含:内容字符串、选项对象和编辑器实例,应该返回由 {message, severity, from, to} 对象组成的数组,代表所出现的问题。 当注解函数的 async 属性可用时,注解函数被调用时会被传递第二个参数,一个带有问题数组的回调函数。 注解函数也可以返回 Promise 对象,仅当 Promise 对象完成后处理格式警告。 默认的,每当修改文档时,格式警告函数都会被调用。 可以设置 lintOnChange: false 选项来禁用。 可以设置 selfContain: true 选项来在编辑器实例内渲染提示。 依赖 addon/lint/lint.css。 参考Demo
selection/mark-selection.js
当启用 styleSelectedText 选项时,使用 CodeMirror-selectedtext CSS 样式来标记指定区域的文字。 用来修改指定区域的颜色(背景色)。 参考Demo
selection/active-line.js
增加 styleActiveLine 选项,启用时, 为当前行增加由 CodeMirror-activeline 样式修饰的 wrapper, 增加由 CodeMirror-activeline-background 样式修饰的背景, 为当前行的侧边栏增加 CodeMirror-activeline-gutter 样式。 这些选项可以是 boolean 或包含下面属性的对象:
nonEmpty: bool
判断有选区时是否标记当前行。默认false(不标记)。
参考Demo
selection/selection-pointer.js
增加 selectionPointer 选项,用来控制当鼠标悬浮在选区上是的样式。 可以是一个字符串,例如 "pointer",或 true,使用 "default" (箭头)。 参考 mode/htmlmixed/index.html
mode/loadmode.js
增加 CodeMirror.requireMode(modename, callback) 函数,加载指定的 Mode,成功后调用回调函数。 你需要指定 CodeMirror.modeURL 作为Mode加载路径, 例如 "mode/%N/%N.js"%N 为Mode名。 增加 CodeMirror.autoLoadMode(instance, mode) 函数,确保给定的Mode被加载,并在加载成功后刷新指定编辑器实例的Mode。 参考Demo
mode/meta.js
Provides meta-information about all the modes in the distribution in a single file. 将所有 Mode 的meta信息集中在一个文件中。 增加 CodeMirror.modeInfo,由 {name, mime, mode} 对象组成的数组, name 是可阅读的名字,mime 是 MIME 类型,mode 是定义了该 MIME 的 Mode 的名字。 该对象还包含可选属性 mimes,是具有多个 MIME 关联的 Mode 的 MIME 数组, 可选属性 ext,为所关联的文件扩展名数组。 增加四个便捷的函数:CodeMirror.findModeByMIMECodeMirror.findModeByExtensionCodeMirror.findModeByFileNameCodeMirror.findModeByName, 可根据MIME、扩展名、文件名、Mode名来查找 Mete 对象。 注意:由于历史原因,该文件位于根目录下的 mode 目录,而不是 addon 目录。 参考Demo
comment/continuecomment.js
增加 continueComments 选项,当在注释块内按下回车键时,是否应该继续添加注释行。 可以是 boolean 值来启用/关闭该功能。 为字符串时,使用自定义字符来添加注释行。 为对象时,key 属性来自定义字符,continueLineComment 判断是否应该继续添加注释(默认为true)。
display/placeholder.js
增加 placeholder 选项,在编辑器为空且为选中时替换编辑器的内容。 可以是字符串或DOM元素。 增加 CodeMirror-empty CSS 样式,当编辑器内容为空时使用。 参考Demo
display/fullscreen.js/dt>
增加 fullScreen 选项,当为 true 时,将编辑器设置为浏览器全屏。 依赖 addon/display/fullscreen.css。 参考Demo
display/autorefresh.js
使用隐藏的DOM元素初始化编辑器时,很难在编辑器可见时调用 refresh 函数。 增加 autoRefresh 属性,设置为 true 来确保启用,如果编辑器初始化时不可见,这将确保在编辑器可见时进行刷新。 每 250 微秒(可以用 {delay: 500} 来配置该时间)调用一次。 注意:该插件只在编辑器可见时刷新一次编辑器,无视后续的 restyling 和 resizing 。
scroll/simplescrollbars.js
增加两个滚动条模式 "simple""overlay"(参考 Demo), 可由 scrollbarStyle 配置进行选择。 依赖 addon/scroll/simplescrollbars.css,可以覆盖该样式来自定义滚动条样式。
scroll/annotatescrollbar.js
在滚动条上增加标记,可以跳转到文档的对应位置。 增加 annotateScrollbar 函数,参数为 CSS 样式名,来创建一组注释。 该函数返回 update 函数,参数为由 {from: Pos, to: Pos} 对象组成的有序数组,标记需要高亮的范围。 调用对象的 clear 函数可以清除标记。
display/rulers.js
增加 rulers 选项,为编辑器增加多条垂直标尺。 该值为 {column [, className, color, lineStyle, width]} 组成的数组或数字(列)组成的数组。 标尺在 column 属性指定的列处显示。 className 属性定义标尺使用的样式。 参考Demo
display/panel.js
增加 addPanel 函数,可以在编辑器实例的上方或下方添加DOM元素,并缩小编辑器来为该元素腾出空间。 该函数第一个参数为DOM元素,第二个参数为可选的对象。 该函数返回的 Panel 对象的 clear 函数可以清除该面板, changed 函数可以在面板的尺寸改变时通知插件。
该函数由下面的选项:
position: string
新增面板的位置:
top(默认)
最顶部。
after-top
顶部区域内的底部。
bottom
最底部。
before-bottom
底部区域内的顶部。
before: Panel
指定面板的前面。
after: Panel
指定面板的后面。
replace: Panel
替换指定面板。
stable: bool
在指定面板上方添加面板时,是否滚动编辑器来确保文字的垂直位置固定。默认为false。
使用 afterbeforereplace 时,如果指定面板不存在或已被删除,将会使用 position 选项作为备用。
参考Demo
wrap/hardwrap.js
段落硬换行插件。添加如下函数:
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)
将指定范围内的段落归为一段。
支持配置:
paragraphStart, paragraphEnd: RegExp
一般把空白行作为段落分割。该配置可以把指定规则作为段落的开始和结束。
column: number
行的列数。默认80。
wrapOn: RegExp
正则表达式,只允许使用两个匹配字符进行分段。 该插件默认只在空白符和破折号后分段。
killTrailingSpace: boolean
判断分段后应该保留这串空格还是删除这串空格。默认为true。
参考Demo
merge/merge.js
使用2或3视图来合并更改。 CodeMirror.MergeView 构造函数与 CodeMirror 构造函数的参数类似, 第一个参数为界面的DOM元素,第二个参数为配置对象。 配置会传递到视图内的编辑器中。 支持以下额外的配置:
origLeft and origRight: string
如果提供了文档的多个原始版本,将会在左右两边创建只读的编辑器实例。 合并界面会高亮显示在原文件和可编辑文件直接的修改。 2视图(相对于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
When true (default is false), stretches of unchanged text will be collapsed. 为true时(默认 false),无修改的文本将被折叠。 为数字时,该段的头多少行将保留可见(默认为2)。
allowEditingOriginals: boolean
原始编辑器是否可编辑,默认为false。
showDifferences: boolean
为true时(默认),改动的文本高亮显示。
chunkClassLocation: string|Array
默认使用 addLineClass 函数来为高亮行添加 "background" 。 使用该参数可以自定义。
该插件还提供 "goNextDiff""goPrevDiff" 函数来快速跳转修改块。 参考Demo
tern/tern.js
基于 Tern JavaScript 分析引擎,为补全、查找定义和重构提供帮助。 参考 Demo。 更多使用场景参考 addon/tern/tern.jsTern官网上的例子