第一章 前言和基本用法
一、前言
我一直都想研究IDE是怎么实现的，但是由于种种困难，一直没有去做这项工作。我还特别想通过尝试进行翻译，来提高自己的英文水平。另外，我还希望通过研究别人的代码来提高自己的编程水平。
总之，在种种因素的推进之下，我打算开始着手做CodeMirror的官方文档翻译以及使用教程编写工作。我从来没有在国外的网站上见到过中文，因此我特意向CodeMirror的作者询问，是否可以在官方的论坛上写作中文文章，然后得到了作者的肯定。
CodeMirror是一个了不起的项目，其完成度高，功能丰富，作为一个开源的插件，堪称优秀。作者对于项目的维护非常活跃，他也一直关注着官方的论坛，几乎是有帖必回。
但是不得不说，在线IDE并不是一种应用广泛的插件，甚至可以说是应用面非常狭窄。尽管如此，它也绝对有独特的用武之地，尤其是用在一些固定格式的文本编写中。CodeMirror为使用者提供的编程接口，使得你可以非常容易地扩展其功能。
我今天着手做翻译工作，就是希望能给大家留下一份适合中文使用者浏览的资料，以东方人的思维和行文方式，尽量为大家学习和使用CodeMirror提供便利，当然，也是为我自己以后复习，留下宝贵的学习笔记。但是不得不说，我希望大家还是尽量提高英文水平，增强自己的英文阅读能力。我本身英文水平不高，翻译难免谬误，请大家见谅。也推荐大家像我一样，通过翻译英文来学习英文。
我本来已经进行了一部分的翻译工作，但是觉得做得不太好，单纯的英汉互译并没有太大的意义，google翻译可以为我们做这件事情，并且效果不错。经过一番思考，我觉得在翻译的基础上，增加自己的思考内容，我不是学js的，我本身是java程序员，所言内容如有谬误之处，欢迎指正。
最后，我认为我的教程应该达到以下特点：
- 一定是由浅入深的，从头到尾学习的人，一定会逐渐提高。
- 一定是模块分离的，对于有一定基础的人，能够任意选择章节阅读，而不会被其它章节束缚。
- 一定是丰富有益且简明易懂的，不能为了我自己写作时爽快，就写得让阅读者一头雾水，读起来磕磕绊绊。
最后，祝大家阅读愉快！欢迎多加指正。
二、基本用法
引入编辑器的主库文件
<script src="lib/codemirror.js"></script>
在5.20及以后的版本中，压缩包已经不提供codemirror.js文件了，需要自己去编译生成。但是我并不想去编译，因为我并不擅长这个，所以，我选择了5.19版本来使用。
实例化编辑器
方式1.构造函数
a.传入一个dom对象
var myCodeMirror = CodeMirror(document.body);
你现在将在页面上看到一个编辑器，简陋的很，像是一个普通纯文本编辑器。
入参是一个dom对象，源码通过调用这个dom对象的appendChild方法，将编辑器对象作为你传入的dom对象的孩子附加上去。由于这个方法是所有dom对象都有的，所以你可以传递任意dom对象作为参数。但是，像input、br这样的dom对象，很显然不能允许孩子的存在，虽然能调用方法生成节点，但是那将毫无意义。所以你最好将div这种对象传进去。
这种方式类似于：你需要提供一本书，让老师在上面盖上小红花印章。
b.传入一个函数
有的时候，也许你希望更直接的控制。你希望将小红花盖在你家的门上，你总不能把大门扛到老师这里来。你只需要把老师的盖小红花的印章拿过来就行了。
这个构造函数的入参也可以是一个函数：
var myCodeMirror = CodeMirror(function(editorObj) {
// 用户代码
//myTextArea.parentNode.replaceChild(editorObj, somePlaceHodlerDiv);
});
editorObj就是编辑器对象。现在你可以在用户代码的位置将页面上一个你设置的用来占位置的div替换为这个elt编辑器：
someDomObj.replaceChild(editorObj, somePlaceHodlerDiv);
也可以在某个对象里面添加这个对象：
someDomObj.appendChild(editorObj);
或者是你喜欢的任何处理这个编辑器的方式，如jQuery
$(someObj).html(editorObj);
$(someObj).append(editorObj);
方式2.静态方法
通常情况下，我们不止是想在页面上展示一个编辑器而已。我们的最终目的是使用这个编辑器进行文本编辑，并且最后获得编辑器的值。对于上面方法实现的编辑器，我们当然有办法获得它的值，库函数会为我们提供这样的接口。但是，我们的文本编辑，往往是放在form表单里的，对吧？我们往往希望，表单在提交时，自动获得input、select、textarea等各种类型的值。
为了达到自动获取编辑器的值并作为表单域的目的。我们可以使用CodeMirro的静态方法fromTextArea。
首先，要想在表单里面提交，一个作为表单域的textArea肯定是必不可少的，然后，为了能在提交时，把这个域的值自动替换成我们编辑器里的值，我们需要使一个编辑器与这个textArea关联。这些都不需要我们做，我们只需要调用库提供的方法就可以了：
<body>
<textarea id="editor" name="userComment"></textarea>
<script type="text/javascript">
var myTextarea = document.getElementById("editor");
var myCodeMirror = CodeMirror(myTextarea);
</script>
</body>
它的效果是这样的：页面上会有一个textarea元素，但是是不显示的。textarea元素会有一个紧挨着的兄弟节点，就是我们的编辑器对象。在提交表单时，textarea的value被自动替换为editor的值。
当使用这种方式实例化一个编辑器时，将会给实例附加上以下的方法：
cm.save()
把编辑器的内容，复制到textArea的value中去
cm.toTextArea()
移除编辑器，还原textarea，将编辑器的内容放到其中。
如果你动态创建和删除一个编辑器，而没有破坏它所在的form，必须保证调用toTextArea方法来移除编辑
器。否则提交表单可能造成内存泄露。
cm.getTextArea() → TextAreaElement
返回textarea对象
方式3.在初始化编辑时，控制编辑器的配置
无论是构造函数，还是fromtextArea方法，其实都带有第二个参数。这个参数是一个对象，里面包含了CodeMirror支持的各种配置。所有你没有主动去配置的选项都采用默认值。
####构造函数
var myCodeMirror = CodeMirror(document.body, {
value: "这些内容被作为编辑器的初始内容",
mode: "javascript"
});
var myCodeMirror = CodeMirror(function(elt) {
myTextArea.parentNode.replaceChild(elt, myTextArea);
}, {value: myTextArea.value});
静态函数
var myCodeMirror = CodeMirror.fromTextArea(myTextArea,{});
本章总结
现在，我们来使用我们本章知道的所有知识，并且，规划一下我们接下来的学习方向。请在阅读这段代码时，顺便回忆前面讲过的所有知识点。动动你的脑子去回忆，别只用眼睛学习。
<body>
<form>
<textarea id="editor" name="fieldName"></textarea>
<script type="text/javascript">
var myTextarea = document.getElementById("editor");
var myCodeMirror = CodeMirror(myTextarea,{
value: "function myScript(){return 100;}\n",
mode: "javascript"
});
</script>
</form>
</body>
疑点：配置里面的选项都是什么意思？
没错，我们下一节就是要讲，可以对CodeMirror进行哪些配置。