前言

        CodeMirror是一款支持在线的支持语法高亮的代码编辑器。功能强大，支持多种语言，由于公司的需要便花了点时间研究，通过网上的介绍教程大致明白了使用方法，却发现大多数教程并不是特别详细的介绍具体的使用，当然由于CodeMirror编辑器的功能强大，具体的功能都要一一详细介绍是需要花费很大精力的，每个人都是因为需要才去使用，我也不为过。在这里，我也只介绍我需要我接触到的部分功能，争取尽量讲解详细，帮助到大家。

CodeMirror具体使用

1，官网网址

2，插件代码

        代码下载完后不需要把整个文件拷贝到项目中，根据项目的需要把对应的文件放置进去便可。在整个文件夹中lib文件是核心代码和核心样式；addon/fold目录下的文件是用来实现代码折叠功能；mode文件夹是CodeMirror支持的语言语法定义，具体可以点击进去查看，每一个语言下都会有个index.html文件可以查看。theme是用于设置编辑器的主题。

3，引入主要的文件

        在html文件中引入核心文件

引入核心css和js

        其次在根据项目所需要的功能引入所需的css和js文件
        实现代码折叠引入下列文件(ps:除了样式css文件必须引入，其他js文件看项目所需引入可以不用全部引入，亲测！可自行测试。)

代码折叠

        若代码折叠是根据Markdown则需多引入下列文件

markdown代码折叠

        实现全屏功能引入下列文件

全屏        

        实现当前行背景高亮和括号匹配功能引入下列文件

当前行背景高亮和括号匹配

        实现搜索功能引入以下文件

搜索

        接着在html文件中插入textarea节点

        在js文件中调用CodeMirror方法实现在线编辑器，其中setOption("extraKeys",{})用来设置快捷键。

编辑器基础参数配置

         实现merge/diff功能引入以下文件

Merge/Diff

        在html文件中插入div节点

        在js文件中引用CodeMirror的方法

 用angular将CodeMirror使用封装成指令

        提醒：有些代码是根据需求而写，有些未必需要，请大家自行判断。

        以下代码及前面所引入的js共同完成的CodeMirror的功能有:

        <1>Code Folding   <2>Search Interface  <3>Merge/diff interface  <4>Full-screen editor

        (其中有使用foldCode方法是使编辑器默认将可折叠的代码折叠，这是目前所找到的较为繁琐的方法，如果后续能够研究出更为简易的方法会分享出来给需要的人。)

单纯的编辑器 Merge/Diff 图一 图二 图三

最后，如有错误或者更好的方法欢迎大家留言告知，看到网上的教程觉得并不是很清晰，便抱着共同进步 用最诚挚的心 分享，不喜勿喷，转载者请原文转载，谢谢。