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.statereturn (<CodeMirroreditorDidMount={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}}/>)}

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

在react中使用codemirror相关推荐

React中CodeMirror插件的使用及封装
目录一.CodeMirror是什么二.React中CodeMirror的基本使用介绍 (一)引入CodeMirror 1. 安装CodeMirror插件 2.引入 CodeMirror 插件 (二 ...
react中CodeMirror （代码编辑器）
前言: 实现一个在react项目中页面展示代码编辑器的效果. codemirror: 使用JavaScript为浏览器实现的多功能文本编辑器.codemirror作用:专门用于编辑代码,并带有实现更高 ...
处理 react_【学习教程】React 中阻止事件冒泡的问题
来源 | https://www.cnblogs.com/Wayou/p/react_event_issue.html 在正式开始前,先来看看 js 中事件的触发与事件处理器的执行. js 中事件的监 ...
react中ref的使用
在react中获取真实dom的时候就需要用到ref属性,具体使用如下 var MyComponent = React.createClass({handleClick: function() {con ...
react中使用构建缓存_如何在React中构建热图
react中使用构建缓存 Heat maps are a great way of visualizing correlations among two data sets. With colors ...
react中使用构建缓存_通过构建海滩度假胜地网站，了解如何使用React，Contentful和Netlify...
react中使用构建缓存 In this full course from John Smilga you will learn React by building a beach resort we ...
创建react应用程序_通过创建食谱应用程序来学习在React中使用API
创建react应用程序 Learn how to use external APIs with React and React Router in a full tutorial from Hamza ...
react中纯函数_如何在纯React中创建电子邮件芯片
react中纯函数 by Andreas Remdt 由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure Reac ...
如何在React中使用Typescript
TypeScript can be very helpful to React developers. TypeScript对React开发人员可能非常有帮助. In this video, Ben ...
react中使用scss_我如何将CSS模块和SCSS集成到我的React应用程序中
react中使用scss by Max Goh 由Max Goh 我如何将CSS模块和SCSS集成到我的React应用程序中 (How I integrated CSS Modules with SC ...

在react中使用codemirror

codemirror

在react中使用codemirror相关推荐

最新文章

热门文章