CodeMirror源码编辑器

2016-02-13~2016-02-24
这是我进入公司的第六个迭代，这个迭代的任务是用CodeMirror改造公司某产品的所有范例，让用户可自己编辑范例源码。

Master给了我相应的知识点——codeMirror的官方文档：
https://codemirror.net/
（英文版，头疼，在网上找了其他的“中文版”解释说明，多，杂，具体操作起来，还是得老老实实看官方文档。所以，我还是乖乖恶补英语吧～

1、引入核心文件

<link rel="stylesheet" href="lib/codemirror.css"><script src="lib/codemirror.js"></script>

2、代码调用

<textarea id="code"></textarea>var html = $.ajax({url: 你需要获取源码的网页, async: false}).responseText; //获取网页文本内容if (html && html != "") {    $('#code').val(html);}editor = CodeMirror.fromTextArea(document.getElementById("code"), {            lineWrapping: true,         //是否换行            foldGutter: true,           //是否折叠            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], //添加行号栏，折叠栏            lineNumbers: true,          //是否显示行号            styleActiveLine: true,      //光标类            matchBrackets: true,        //括号匹配            selectionPointer: true,     //鼠标光标悬停样式            mode: "htmlmixed",          //模式            extraKeys: {                //自动补全                "Ctrl": "autocomplete"            },            viewportMargin: Infinity    //确保整个文档总是呈现        });        //自动补全        CodeMirror.commands.autocomplete = function (cm) {            cm.showHint({hint: CodeMirror.hint.anyword});        };editor.setValue($("#code").val());//codeMirror赋值$('#code').val(editor.getValue());//codeMirror取值

（注：我使用codeMirror主要用于代码的显示）
3、根据所需要的功能引入相应的文件，这时候需要仔细阅读官方文档
我主要用了以下功能：代码高亮、折叠、自动补全、括号匹配

<!--代码高亮--><link rel="stylesheet" href="doc/docs.css"><script type="text/javascript" src="mode/css/css.js"></script><script type="text/javascript" src="mode/xml/xml.js"></script><script type="text/javascript" src="mode/htmlmixed/htmlmixed.js"></script><script type="text/javascript" src="mode/javascript/javascript.js"></script><!--支持代码折叠--><link rel="stylesheet" href="addon/fold/foldgutter.css"/><script src="addon/fold/foldcode.js"></script><script src="addon/fold/foldgutter.js"></script><script src="addon/fold/brace-fold.js"></script><script src="addon/fold/comment-fold.js"></script><!--括号匹配--><script src="addon/edit/matchbrackets.js"></script><!--自动补全--><link rel="stylesheet" href="addon/hint/show-hint.css"><script src="addon/hint/show-hint.js"></script><script src="addon/hint/anyword-hint.js"></script><script src="addon/hint/javascript-hint.js"></script><script src="addon/hint/html-hint.js"></script><script src="addon/hint/css-hint.js"></script>

到这里，源码编辑器的代码显示部分就算完工了，如果还需要其他功能就多读读codeMirror的官方文档吧！
至于这次任务的其他部分（运行，重置，复制，拖拽效果等）我会写在其他博客里，分小点记录是个人习惯。