react中CodeMirror （代码编辑器）

李建英 發表於 2022-8-26 17:13:00

前言：
　　实现一个在react项目中页面展示代码编辑器的效果。
<h1>codemirror：</h1>
　　使用JavaScript为浏览器实现的多功能文本编辑器。codemirror作用：专门用于编辑代码，并带有实现更高级编辑功能的多种语言模式和附加组件
实现效果
<img src="https://img2022.cnblogs.com/blog/2749674/202208/2749674-20220826171003484-896556970.png">
 
 
 
 1. 首先从react-codemirror2中引入Codemirror组件　　
<div class="cnblogs_code">
<pre>import {UnControlled as CodeMirror} from 'react-codemirror2'</pre>
</div>
2. 他的核心在于引入codemirror.js和codemirror.css
<div class="cnblogs_code">
<pre>import 'codemirror/lib/codemirror.js'
import 'codemirror/lib/codemirror.css'</pre>
</div>
3.  codemirror的背景主题（可以设置自己喜欢的主题样式），同时他还需要在options里面设置theme:'yonce'
<div class="cnblogs_code">
<pre>import 'codemirror/theme/yonce.css'</pre>
</div>
4. 引入一些代码模式
<div class="cnblogs_code">
<pre>// 代码模式，clike是包含java,c++等模式的
import 'codemirror/mode/clike/clike'
import 'codemirror/mode/javascript/javascript' //js
import 'codemirror/mode/python/python.js' //python</pre>
</div>
 5. 代码高亮和代码折叠
<div class="cnblogs_code">
<pre>//代码高亮
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';</pre>
</div>
6、可以通过插件获取到simple和overlay两种，但是需要引入js和css，咋了好久才找到，分别是：
<div class="cnblogs_code">
<pre>//代码滚动
import 'codemirror/addon/scroll/simplescrollbars.js'
import 'codemirror/addon/scroll/simplescrollbars.css'</pre>
</div>
渲染代码
<div class="cnblogs_code">
<div>
<div>　</div>
<div> </div>
<div>　const {text} = this.state;//自己在state中定义初始代码编辑框中的值</div>
</div>
<pre> <CodeMirror
 id='scriptDesc'
 editorDidMount={editor => { this.instance = editor; }}
 value={text}
 onChange={this.changeCode}
 // eslint-disable-next-line no-return-assign
 ref={(c) => this.myCodeMirror = c}// 添加ref属性获取dome节点
 options = {{
 lineNumbers: true, // 显示行号
 mode: {name: 'text/x-java' || 'javascript'}, // 语言
 autofocus: true, // 自动获取焦点
 styleActiveLine: true, // 光标代码高亮
 theme: 'yonce', // 主题
 scrollbarStyle: 'overlay',
 lineWrapping: true, // 代码自动换行
 foldGutter: true,
 gutters: ['CodeMirror-linenumbers', 'CodeMirrorfoldgutter'] // end
 }}
 /></pre>
</div>
方法
<div class="cnblogs_code">
<pre>changeCode = (CodeMirror, changeObj, value) => {
 if (!value) return;
 // 获取 CodeMirror.doc.getValue()
 // 赋值 CodeMirror.doc.setValue(value) // 会触发 onChange 事件，小心进入无线递归。
 this.setState({text: value});
};</pre>
</div>
  
来源：https://www.cnblogs.com/qing1224/p/16628272.html

頁: [1]

琼殿技术论坛's Archiver

react中CodeMirror （代码编辑器）