react-cmirror
Codemirror Component for React.js, all Codemirror options and events are supported.
中文|English
- Installation
npm install --save react-cmirror
- Demo & Examples
To build the examples locally, run:npm install
npm run start
- Usage
Minimal usage:import ReactCodeMirror from 'react-cmirror';
<ReactCodeMirror value={text} />
- Properties
value
: the editor valueoptions
: options for CodeMirror, see the CodeMirror Configuration for available options.width
: set width the editor, width and height can be either numbers (interpreted as pixels) or CSS units ("100%", for example). You can pass null for either of them to indicate that that dimension should not be changed.height
: set height the editor, same as width
Note:
width
and height
overriding the css style of CodeMirror, if you want to change the style of CodeMirror, refer to CodeMirror Customized Styling for detail.- Events
CodeMirror support kinds of Events, to use these events, you need to follow the rules:Uppercase
the first letter of event name, and addon
at the beginning, as the property of editor.- Event handle function recieve arguments as CodeMirror defined.
For example, to deal with
scroll
event, you need set property onScroll
, and handeScroll will recieve instance
argument :handleScroll = (instance /*CodeMirror instance*/) => {
console.log(instance);
}
<ReactCodeMirror onScroll={this.handleScroll} />
- Access to CodeMirror
You can get CodeMirror instance from editor
and CodeMirror object from codemirror
by using ref.getInstance = (instance) => {
this.codemirror = instance.codemirror;
this.editor = instance.editor;
}
<ReactCodeMirror ref={this.getInstance}/>
- Language modes&Themes
Language modes
CodeMirror support syntax highlighting by setting language mode. These Language Modes are available. By default, no modes is included, to enable this:- import language mode from
mode
directory of codemirror - set
mode
option inoptions
property
Themes To change the color schemes of highlighting, theme option is supplied, these Themes are avalible, to use like this:
- import theme from
theme
directory of codemirror - set
theme
inoptions
property
import ReactCodeMirror from 'react-cmirror';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/theme/monokai.css';
<ReactCodeMirror options={{mode: 'markdown', theme: 'monokai'}} />
- Addon
Addons are used to implement extra editor functionality, import addon after react-cmirror
, and set options follow the instruction.import ReactCodeMirror from 'react-cmirror';
import 'codemirror/addon/display/fullscreen';
import 'codemirror/addon/display/fullscreen.css';
<ReactCodeMirror options={{fullScreen: true}} />