changemode.html【支持一种语言到另一种语言模式的转换；示例中是Scheme mode和JS mode的相互转换。编辑器会自动监测编辑框内用户输入的代码是哪一种mode，检测之后就会更改它的mode】
change_mode_demo.png 普及一下Scheme：Scheme是一种函数式编程语言，是Lisp的两种主要方言之一（另一种为Common Lisp）。【表示没用过，js也是一种函数式编程语言呀！】
代码：change_mode_code.png
代码分析：
【1、因为示例只是js和scheme这两种mode的转换，所以只需要额外加载这两个js文件，如果是其它或多个mode，就需要加载相应的mode文件夹下的js】
【2、当用户在编辑框内输入字符，会触发编辑框editor的change事件，此时调用更新函数update。同样使用setTimeout，400ms的延迟也是为了提升页面的性能。】
【3、函数update的功能是进行模式的转换，用到的API是：editor.setOption('mode', ...)】
【4、关于editor如何检测用户输入的字符的mode，就用到了正则，函数looksLikeScheme是用来判断像不像Scheme mode，正则则是用来检测是否是JS mode】
closebrackets.html【括号的自动补全，这个很简单，就是闭合括号。你只输入括号的前一半，后一半就会自动补全，并且鼠标也会定位在括号里面】close_brackets_demo.png
我编辑的时候括号自动补全了。
代码【画红框的是需要注意的实现该功能的关键】：
close_brackets_code.png
closetag.html【针对html和xml的标签的自动闭合。开始标签输
完右尖括号，标签就会自定闭合，并且鼠标定位到里面】
![Uploading close_tag_code_170025.png . . .]
close_tag_demo.png
代码：close_tag_code.png
compelete.html【自动补全代码，前面也有一个自动补全，有什么不一样？这个我也没测试出啥效果！】auto_complete_demo.png
代码：auto_complete_code.png
emacs.html【绑定emacs，做类似于emacs编辑器那样的功能。感觉应该是很多快捷键的不同。从未用过emacs，不想测试，先贴图吧！】emacs_binding.png
【那段英文大致是：Emacs绑定需要包括keymap文件夹下的emacs.js，另外在可选参数中设置keyMap: emacs。因为CodeMirror内部的API与Emacs有很大的不同，因此这个功能也只是做到了大致与Emacs相仿。另外许多浏览器的快捷键也和Emacs的快捷键有冲突，因此Emacs绑定不能做到十全十美。】
代码【加载的那些js和css不知道都是用来做什么的？以后有需要再来研究，毕竟Emacs现在不是主要的。】：
emacs_bindind_code.png
folding.html【针对文件夹的？并不是，代码折叠，方便代码量大的时候搜索查看代码结构】js_no_folding.png
js_folding.png
html_no_folding.png
html_folding.png
md_no_folding.png
md_folding.png
代码：link_script.png 【brace-fold.js】折叠js；【xml-fold.js】折叠xml和html；【markdown-fold.js】折叠md；【comment-fold.js】折叠注释，但是测试一下只能折叠html的注释；
html_code.png html的结构。
js_code.png 配置项：【extraKeys】快捷键折叠，把鼠标放在那一行，然后按该快捷键，就会折叠；【foldGutter】要启用折叠功能的话，就写true；【gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]】为每一行前折叠的图标留位置，在行号后面。【editor_js.foldCode(CodeMirror.Pos(13, 0));。。。】这不知道是干嘛的？我去掉了也可以折叠，以后再探究。
fullscreen.html【全屏显示，按F11全屏显示，按Esc退出全屏显示】full_screen.png
fullscreen_code.png
页面编辑器变成了黑色，是因为用到了night这个theme，需要引入css以及在参数选项中配置theme。【extraKeys】配置快捷键F11和Esc。
hardwrap.html【wrap应该是和段落相关的】hard_wrap.png
hard_wrap_code.png
定义了一个option变量，应该就是段落的长度，超过改长度就会到下一行。还配置了一个快捷键【Ctrl+Q】，将setTimeout的时间设置大一点，然后再页面中做修改，再按快捷键，会体会到和定时器的回调起的一样的作用。
html5complete.html【html5的代码提示，需要按快捷键，不是自动提示的。】html5_complete.png
我在html页面中编辑，然后按快捷键，Ctrl+A，就会提示。但是图截不下来，<body>下面那个d会提示以d开头的单词。
代码：
html5_complete_code.png 【各种hint应该不能少，原来配置的快捷键是Ctrl+Space，但是这个快捷键是系统改变输入法的，有冲突，因此改成了Ctrl+A，之前的一个demo中Ctrl+Space无法工作的原因应该就是这个】
indentwrap.html【也是和段落相关，段落内部，一个段落按了enter之后是对齐的】indent_wrap.png
indent_wrap_code.png
renderLine事件和refresh方法【不会用啊，这些API，有没有API的中文文档？？？】。配置lineWrapping。
lint.html【检测代码是否有语法错误】
lint.png 代码：
lint_code.png 如果没有
gutters: ["CodeMirror-lint-markers"], lint: true这两个配置，那么页面中的警示和出错的提示就没有了。
loadmode.html【模式的惰性加载：用户输入后按enter或者点击按钮后才加载该模式】load_mode.png 代码：
load_mode_html.png
load_mode_js.png 第一行的作用应该就是匹配mode文件夹下的各种mode，因为用户输入的mode是不确定的，因此不能再一开始就引入所有的mode，而是根据用户输入按需要引入。用户输入完成后按enter键或者点击按钮调用change函数。可以输入3种类型：文件名【根据名称后缀来确定mode】、MIME类型、直接就输入mode。
marker.html【添加断点，但是好像不能调试】
breakpoint.png 代码：
breakpoint_code.png 注意js只有一句话：eval了一个字符串。该字符串才是真正要执行的js代码。
breakpoint_js.png 编辑器有一个
gutterClick事件，可以理解为显示行号的位置就是gutter，用户点击后触发回调，在gutter上添加断点符号。配置gutters: ["CodeMirror-linenumbers", "breakpoints"]不能少，要不然就没有gutters来放置断点符号了。但是这个断点也只是添加一个符号而已，并没有可以调试的功能，以后再慢慢摸索。
markselection.html【鼠标点击选中后的样式的改变，背景色和字体的颜色】
mark_selection.png
代码：mark_selection_code.png 配置
styleSelectedText: true表示选中后文本颜色是否改变，该值为true表示字体颜色会变成在css中定义的，否则就不变，选中后字体还是黑色的。editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});这段代码是为页面中特定位置的字符添加类，从而有自己的样式，此例中的background color。
matchhighlighter.html【点击某个单词-匹配-全局高亮】
match_hightlighter.png 代码：
match_highlighter_code.png 配置
highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}如果没有，该功能就不会实现。annotateScrollbar: false如果是false，则滚动轴上面就不会标记。showToken: /\w/应该就是匹配单词字符。
matchtags.html【匹配标签：点击选中标签的一半，另一半也会高亮】
match_tag.png 代码：
match_tag_code.png 配置：
matchTags: {bothTags: true},如果为false就没有该功能。快捷键Ctrl+J的功能是：用户点击选中一部分标签以后，按Ctrl+J，就会定位到标签的另一部分。
<== 未完待续 ==>
网友评论