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中定义初始代码编辑框中的值<CodeMirrorid='scriptDesc'editorDidMount={editor => { this.instance = editor; }}value={text}onChange={this.changeCode}// eslint-disable-next-line no-return-assignref={(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});};

react中CodeMirror （代码编辑器）相关推荐

React中CodeMirror插件的使用及封装
目录一.CodeMirror是什么二.React中CodeMirror的基本使用介绍 (一)引入CodeMirror 1. 安装CodeMirror插件 2.引入 CodeMirror 插件 (二 ...
React中使用Markdown编辑器
前言因为之前写过一个自己的博客,其中编辑文章使用的是富文本编辑器,后来用到Markdown编辑,感觉要比富文本更好用,这里简单记录一下如何在React中添加Markdown编辑器. 一安装这里我 ...
vue2使用Codemirror代码编辑器插件
让我们先看看需求 :一个有SQL语言提示代码编辑器一 . 我这里用的是vue2 三种方法,得指定版本号,不指定就是默认最新,版本6以上都是vue3的版本,引入使用会报错 vue3的版本叫vue-c ...
vue集成codemirror代码编辑器
点击上方" 青年码农 "关注回复"特效源码"可获取各种资料 CodeMirror是一个用 JavaScript 为浏览器实现的通用文本编辑器.它专门用于编辑代 ...
vue项目中使用代码编辑器，视频播放器插件
1.Vue-代码编辑器插件 1)安装 npm install monaco-editor --save npm install monaco-editor-webpack-plugin --save- ...
CodeMIrror.js在线代码编辑器简单使用
代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类web网站中,都对代码高亮提出要求,不高亮的代码阅读体验很差,codeMirror是一个前端代码高亮库,使用方便.CodeMirror 是一款在线 ...
dw上的php代码如何预览在浏览器_13个面向开发人员的JavaScript代码编辑器和IDE
根据知乎的说法,JavaScript(JS)是一种解释性的计算机编程语言.它最初是作为Web浏览器的一部分实现的,这样客户端脚本就可以与用户交互.控制浏览器.异步通信以及更改显示的文档内容. 在本文中 ...
在线代码编辑器：Monaco Editor
monaco editor是微软开源的一款web版代码编辑器.它支持智能提示,代码高亮,代码格式化. Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中.编辑器提供代 ...
java在线编辑器_微软开源在线代码编辑器——Monaco Editor
介绍 Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中.编辑器提供代码提示,智能建议等功能.供开发人员远程更方便的编写代码.移动浏览器或移动Web框架不支持Mona ...

react中CodeMirror （代码编辑器）

codemirror：

react中CodeMirror （代码编辑器）相关推荐

最新文章

热门文章