第一章 前言和基本用法
一、前言
我一直都想研究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进行哪些配置。