codeMirror与antDesign结合

  • 2019-10-12
  • 500
  • 2

背景

最近在开发给公司内部运营使用的系统,需要把json数据格式透出给前端展示,并且可以进行编辑。刚开始采用是<TextArea/>组件,但是TextArea可视化不是很好,影响用户使用。无意中发现了codeMirror神器,可以把数据按照多种语言来展示,只不过codeMirror和antDesign结合有关资料不多,经过一段时间的摸索,终于可以算是完美搞定了。

官方链接:

官方链接:https://codemirror.net/

npm地址:https://www.npmjs.com/package/react-codemirror2

code Mirror和antDesign结合

1. 安装

下载codeMirror使用到的npm包,因为code mirror需要和reactJs结合起来,所以需要下载两个包,一个是原生包,一个是和reactJs结合的包。因为我这采用的是淘宝Npm镜像地址:http://npm.taobao.org/,所以需要使用tnpm命令,没有的话直接使用npm就可以。

tnpm install react-codemirror2 codemirror --save

2. antDesign项目中引入

import { UnControlled as CodeMirror } from 'react-codemirror2'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/lib/codemirror.css'; 
import 'codemirror/theme/solarized.css';
import 'codemirror/mode/clike/clike';

3. 在FormItem表单中使用

<FormItem
        label="数据内容"
      >
        {form.getFieldDecorator('', {
          rules: [{ required: false, message: '数据格式内容' }],
        })(<CodeMirror
          name="compConfig"
          className={styles.codeMirrorCls}
          options={{
            mode: 'application/json',
            theme: 'monokai',
            lint: true,
            matchBrackets: true,
            lineNumbers: true,
            lineWrapping: true,
            styleActiveLine: true,
            smartIndent: true,
            cursorHeight: 0.85
          }}
          // 这个用于填写时候的回调,必须存在,数据更新不能放这里,因为value值是旧值
          onBeforeChange={(editor, data, value) => {
          }}
          // 在失去焦点的时候触发,这个时候放数据最好
          onBlur={(editor, data, value) => {
            // console.log('onBlur fresh');
            form.setFieldsValue({ compConfig: editor.getValue() })
          }}
           />)}
      </FormItem>

注意:

  • 在formItem中使用codeMirror的话,只有codeMirror组件只有onBlur事件会触发,onChange事件会没有反应(估计是codeMirror与form本身的事件冲突导致的)
  • Form下所有元素的值变化,都会自动触发Form表单的onValuesChange(props,changedValues,allValues)事件。
  • 如果要想codeMirror的值变化也触发Form下的onValuesChange事件,由该事件统一处理值,可以在onBlur方法中调用form.setFieldsValue方法,把当前值传给form表单,传完之后就可以触发form下面的onValuesChange方法了,达到和普通元素相同的处理效果。

codeMirror详细配置参考文档:

http://www.fdlly.com/p/1730562672.html

https://www.jianshu.com/p/4d5ef6808da7

感谢打赏!
微信

评论

  • 一休回复

    很实用!