CodeMirror学习（2）

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，就会提示。但是图截不下来，下面那个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，就会定位到标签的另一部分。

<== 未完待续 ==>

---