在react中使用codemirror

最新推荐文章于 2024-08-10 07:01:57 发布

TuMinQiang

最新推荐文章于 2024-08-10 07:01:57 发布

阅读量7.2k

点赞数 6

分类专栏： react 文章标签： react codemirror

本文链接：https://blog.csdn.net/qq_42132814/article/details/112891290

版权

react 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

本文介绍了如何在React项目中集成Codemirror，一个强大的JavaScript文本编辑器，用于代码编辑。通过引入不同模块和样式，实现了代码高亮、折叠、主题设置以及自定义滚动条等功能。详细步骤包括安装、引入组件和相关样式，以及配置选项来创建一个具有行号、自动聚焦、代码高亮和折叠功能的代码编辑器。

摘要由CSDN通过智能技术生成

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 (
            <CodeMirror
                editorDidMount={editor => { 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
                }}
            />
        )
    }

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