Skip to content

Latest commit

 

History

History
111 lines (74 loc) · 3.53 KB

README_zh.md

File metadata and controls

111 lines (74 loc) · 3.53 KB
Raw

react-cmirror

react-cmirror是一个对codemirror组件的react封装，支持所有的codemirror的配置和事件。

中文|English

npm npm

1. 安装

npm install --save react-cmirror

2. 运行例子

执行以下命令，在本地运行例子：

npm install
npm run start

3. 使用说明

最简使用方案:

import ReactCodeMirror from 'react-cmirror';
<ReactCodeMirror value={text} />

4. 参数

  • value: CodeMirror显示的值
  • options: CodeMirror的配置, 参考 这里 查看所有可用的配置.
  • width: 设置编辑器宽度，可以使用数字（例如： 400，单位为像素）、CSS单位（例如: '100%'，如果设置为null，表示宽度不需要改变
  • height: 设置编辑器高度，和宽度类似

注意: width 和 height 会覆盖CodeMirror的CSS样式，如果有其他方面的修改需求，参考 这里

5. 事件

CodeMirror 支持各种 事件, 请按照以下规则响应事件操作:

  • 将CodeMirror支持的事件名首字母大写，并在前面添加on，以此作为属性
  • 事件处理函数接受的参数，是CodeMirror定义的参数

以滚动事件为例，应该设置onScroll, 其处理函数接受CodeMirror的实例

handleScroll = (instance /*CodeMirror instance*/) => {
  console.log(instance);
}

<ReactCodeMirror onScroll={this.handleScroll} />

6. 访问CodeMirror本身

可以通过使用ref获得CodeMirror的实例editor和CodeMirror对象codemirror

getInstance = (instance) => {
  this.codemirror = instance.codemirror;
  this.editor = instance.editor;
}
<ReactCodeMirror ref={this.getInstance}/>

7. 设定语言和主题

语言类型 CodeMirror 支持各种类型语言的语法高亮. 这里 是可用的语言类型.但是在默认情况下，没有设置该参数，可以通过以下方式来支持:

  • 从codemirror的 mode 文件夹下导入mode
  • 在 options 中设置mode选项

主题 通过设置主题，可以改变各种配色方案，支持的主题可以在 这里查看，使用方式如下：

  • 从codemirror的 theme 文件夹下导入主题
  • 在 options 中设置theme选项
import ReactCodeMirror from 'react-cmirror';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/theme/monokai.css';

<ReactCodeMirror options={{mode: 'markdown', theme: 'monokai'}} />

8. 插件

插件 用来给Codemirror提供额外的功能，在导入 react-cmirror 导入插件对应的文件，并按照说明设置options

import ReactCodeMirror from 'react-cmirror';
import 'codemirror/addon/display/fullscreen';
import 'codemirror/addon/display/fullscreen.css';
<ReactCodeMirror options={{fullScreen: true}} />

9. 异步加载

react页面异步加载可能会导致渲染问题，使用插件autorefresh 解决，或者在页面加载完毕后，手动调用CodeMirror的refresh方法。

License

Copyright (c) 2017 ZiQiangWang MIT Licensed.