codemirror官网

https://codemirror.net/ （全英文，我这种英语渣渣是直接谷歌翻译的，大家不要学我）

https://www.npmjs.com/package/react-codemirror2 （react-codemirror2官网）

codemirror和react-codemirror2 （针对上面2个codemirror官网，个人浅薄的理解，仅供参考，欢迎指正）

codemirror： 不使用任何第三方前端框架时使用

react-codemirror2： 二次封装，集成为 react 中的一个插件，专用于在 react 中使用

codemirror安装

npm install codemirror （默认安装最新版本）

npm install react-codemirror2 codemirror --save （react中使用推荐这种安装方式，下面以这种安装方式举例）

codemirror卸载

npm uninstall codemirror

npm uninstall react-codemirror2 codemirror --save

codemirror使用

首先从react-codemirror2中引入CodeMirror组件

然后引入codemirror核心css,js文件 （必须引入 ）

接着引入solarized.css主题和clike代码模式的文件（可选择引入喜欢的主题和模式）

最后在项目中使用引入的CodeMirror组件并在option中进行相关设置，就可以得到一个基本的代码编辑器了

codemirror补充说明

本地不需要在单独新建对应目录结构和本地下载 codemirror 的 css,js 代码，

因为安装 codemirror 后早已在 node_module 中，所以 import 对应文件的路径如下即可，

addon: 其它功能插件 lib： 核心css,js

mode: 代码编辑模式 theme: 主题样式

codemirror其它几个常用功能设置

1.编辑器左侧显示行号

　　option={{
     lineNumbers: true
　　2.自动获取焦点
　　option={{
    　　autofocus: true
　　3.光标行代码高亮
　import 'codemirror/addon/selection/active-line';
　　option={{
    　　styleActiveLine: true
　　4.折叠代码
　　import 'codemirror/addon/fold/foldgutter.css'; 
　　import 'codemirror/addon/fold/foldcode.js';
　　import 'codemirror/addon/fold/foldgutter.js';  
　　import 'codemirror/addon/fold/brace-fold.js';  
　　import 'codemirror/addon/fold/comment-fold.js';
 　　options={{
             lineWrapping: true, 
             foldGutter: true,
             gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
　　import 'codemirror/addon/hint/show-hint.css'; // start-ctrl+空格代码提示补全
　　import 'codemirror/addon/hint/show-hint.js'; 
　　import 'codemirror/addon/hint/anyword-hint.js'; // end 
　　 option={{
    　　extraKeys: { "Ctrl": "autocomplete" }
　　6.设置代码语言模式（比如c，c++，python，java等）
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/xml/xml.js';
import 'codemirror/mode/python/python.js';
import 'codemirror/mode/perl/perl.js';
import 'codemirror/mode/clike/clike.js';
option = {{
    mode: { 
        name: "text/x-csrc",
        name: "text/x-c++src",
        name: "text/x-cython",
        name: "text/x-java"
　　注：上面mode分别设设置的代码模式为c，c++，python，java，跟我们想象种的设置不太一样，参考
　　7. 全屏展示
import 'codemirror/addon/display/fullscreen.css';
　　import 'codemirror/addon/display/fullscreen.js';
 　  option={{
     　 fullScreen: true