首页 > 其他分享 >react中CodeMirror (代码编辑器)

react中CodeMirror (代码编辑器)

时间:2022-08-26 17:24:10浏览次数:59  
标签:CodeMirror 代码 js react fold 编辑器 import codemirror addon

前言:

  实现一个在react项目中页面展示代码编辑器的效果。

codemirror:

  使用JavaScript为浏览器实现的多功能文本编辑器。codemirror作用:专门用于编辑代码,并带有实现更高级编辑功能的多种语言模式和附加组件

实现效果

 

 

 


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';

6、可以通过插件获取到simple和overlay两种,但是需要引入js和css,咋了好久才找到,分别是:

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

渲染代码

     const {text} = this.state;//自己在state中定义初始代码编辑框中的值

<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 }} />

方法

  changeCode = (CodeMirror, changeObj, value) => {
      if (!value) return;
      // 获取 CodeMirror.doc.getValue()
      // 赋值 CodeMirror.doc.setValue(value) // 会触发 onChange 事件,小心进入无线递归。
      this.setState({text: value});
  };

 

标签:CodeMirror,代码,js,react,fold,编辑器,import,codemirror,addon
From: https://www.cnblogs.com/qing1224/p/16628272.html

相关文章

  • 编辑器中运行终端指令报错怎么办?
    一.以管理员身份运行WindowsPowerShell  二.get-ExecutionPolicy查看状态这时候应该是Restricted  三.执行set-ExecutionPolicyRemoteSigned如果没有报错这......
  • 百度编辑器如何能实现直接粘贴把图片上传到服务器中
    ​这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" i......
  • IDEA设置编辑器主题
    1.打开【Setting】。点击菜单栏【File】→【Setting】(或使用快捷键【Crlt+Alt+Shift+S】)。2.点击【Editor】下的【ColorScheme】,选择合适的方案(这里我的IDEA是汉......
  • React报错之You provided a `checked` prop to a form field
    正文从这开始~总览当我们在多选框上设置了checked属性,却没有onChange处理函数时,会产生"Youprovideda checked proptoaformfieldwithoutan onChange handle......
  • 记录一下react遇到的初始化异步赋值问题
    组件加载时发送接口请求获取数据,在根据收集到的数据的某一项值在进行请求获取相对应的值,实现联动效果1useEffect(()=>{2//getQuestionDetail({id:'61a78f5......
  • react 二级路由嵌套
    嵌套路由之后,静态文静路径错误,更改webpack 打包output输出根目录,publicPath:'/',二级路由刷新之后白屏,在首页模板文件中路径前加  /,   ......
  • localStorge在react中的使用
    1.什么时候用,在哪里用刚获取数据的时候,进行设置,localStorge.setItem(key,value);因为localStorge是用来作为缓存的,且有一定的延时,尤其是在本页面设置本页面使用时,所以,依然......
  • 复习:linux vim编辑器
    Vimi键插入esc退出u撤销x删除c选择文本y复制yy复制当前行dd删除光标所在行p 粘贴:w......
  • npm+react linux 开荒
    安装npmyuminstallnodejs.x86_64yuminstallnpm.x86_64 更新GCC版本(参考链接:https://blog.csdn.net/qq_39715000/article/details/120703444)升级到gcc7.3yum-y......
  • react实战系列 —— React 中的表单和路由的原理
    其他章节请看:react实战系列React中的表单和路由的原理React中的表单是否简单好用,受控组件和非受控是指什么?React中的路由原理是什么,如何更好的理解React应用的......