• 代码编辑组件

    01. 说明

    可用来高亮多种编程语言。

    使用效果:

    02. API

    CodeMirror

    参数 说明 类型 默认值 必输
    value 编辑器的初始值,可以是字符串或文档 string ''
    className 编辑器的class样式 string hzero-codemirror
    fetchCodeMirror 获取编辑器对象 function(editor) e => e
    onChange 组件值变化的监听事件 function(editor, data,value)
    onBeforeChange 组件值变化前的监听事件 function(editor, data, value, [next])
    options 用于配置组件其他属性,比如组件主题,详见下方描述 object {}

    options 参数(部分)

    参数 说明 类型 默认值 必输
    theme 编辑器主题风格 string ‘default’
    className 编辑器的class样式 string hzero-codemirror
    lineNumbers 显示行号 boolean true
    mode 以什么格式高亮代码 string yaml
    autoFocus 自动获取焦点 boolean true
    readOnly 是否只读,设置为nocursor后将只读且不自动获取焦点 boolean/string false
    cursorHeight 设置行高 number 0.85

    几种常用的mode

    更多mode设置请查看codemirror mode

    PS: 在此只罗列出一部分常用的属性,更多配置项请查看codemirror config

    03. 使用示例

      import CodeMirror from 'components/CodeMirror';
    

    如果使用的mode: 'text/x-java',java模式高亮代码,需要在引入组件前引入相应的样式文件:

      import 'codemirror/mode/clike/clike';
      import CodeMirror from 'components/CodeMirror';
    

    ps: 不同模式的样式引入请查看codemirror mode

      const codeMirrorProps = {
        value: configYaml,
        options: {
          theme: 'default',
          mode: 'yaml',
        },
        onChange: this.handleCodeChange,
      };
    
      <CodeMirror
        codeMirrorProps={codeMirrorProps}
        fetchCodeMirror={editor => this.setCodeMirror(editor)}
      />
    
      // 定义全局的遍历存放editor对象,或者使用state存储
      codeMirrorEditor;
    
      @Bind
      setCodeMirror(editor) {
        this.codeMirrorEditor = editor;
      }
    
      const content = this.codeMirrorEditor.getValue();
    

    如果在Form中使用,需要自行设置表单域的值:

      const codeMirrorProps = {
        value: form.getFieldValue('templateContent'),
        onBeforeChange: this.codeChange,
      };
    
      <Form.Item
        label="html内容"
      >
        {getFieldDecorator('templateContent', {
          initialValue: templateContent,
        })(
          <Codemirror
            codeMirrorProps={codeMirrorProps}
          />
        )}
      </Form.Item>
    
      /**
       * 编辑代码后更新数据
       * @param {object} editor - 编辑器对象
       * @param {object} data - 数据对象
       * @param {string} value - 编辑后的代码
       */
      @Bind()
      codeChange(editor, data, value) {
        const { form } = this.props;
        form.setFieldsValue({ templateContent: value });
      }