在react中使用codemirror

codemirror

使用JavaScript为浏览器实现的多功能文本编辑器。

codemirror作用：专门用于编辑代码，并带有实现更高级编辑功能的多种语言模式和附加组件

codemirror的官网：https://codemirror.net/  （全英文的）

react-codemirror的官网：https://www.npmjs.com/package/react-codemirror2

安装：npm install codemirror --save

如果你是在react使用的话，建议这样安装：npm install codemirror react-codemirror2 --save

今天在项目中使用到了codemirror，就上网去搜索了一番，有了一个大概的了解，因为是一个react项目，所以就直接安装了react-codemirror2

1. 首先从react-codemirror2中引入Codemirror组件

import {UnControlled as CodeMirror} from 'react-codemirror2'

2. 他的核心在于引入codemirror.js和codemirror.css

import 'codemirror/lib/codemirror.js'
import 'codemirror/lib/codemirror.css'

3.  codemirror的背景主题（可以设置自己喜欢的主题样式），同时他还需要在options里面设置theme:'yonce'

import 'codemirror/theme/yonce.css'

4. 引入一些代码模式

// 代码模式，clike是包含java,c++等模式的
import 'codemirror/mode/clike/clike'   
import 'codemirror/mode/javascript/javascript'   //js
import 'codemirror/mode/python/python.js'        //python

 5. 代码高亮和代码折叠

//代码高亮
import 'codemirror/addon/selection/active-line';

// 代码折叠
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';

 项目需要一个上下左右滚动的滚动条，csdn一番后，找到这受scrollbarStyle属性控制，scrollbarStyle文档地址：https://codemirror.net/demo/simplescrollbars.html  ，默认为native，还有一个属性null（表示禁用），可以通过插件获取到simple和overlay两种，但是需要引入js和css，咋了好久才找到，分别是：

//代码滚动
import 'codemirror/addon/scroll/simplescrollbars.js'
import 'codemirror/addon/scroll/simplescrollbars.css'

可以在node_modules中找的codemirror在文件夹，上述所有的js和css都可以在里面找到

 

 

附上代码：value表示编辑器默认显示的代码

render() {
        const {data}=this.state
        return (
             { this.instance = editor }}
                value={data}
                options = {
    {
                    lineNumbers: true, //显示行号
                    mode: {name:'text/x-java'},//语言
                    autofocus:true,//自动获取焦点
                    styleActiveLine:true,//光标代码高亮
                    theme:'yonce',  //主题
                    scrollbarStyle:'overlay',
                    lineWrapping:false, //代码自动换行
                    foldGutter:true,
                    gutters:['CodeMirror-linenumbers','CodeMirrorfoldgutter'],//end
                }}
            />
        )
    }

效果：文字是自己后来加的，为了展示上下左右的滚动条