代码编辑器

@aligov/components-code-editor

基于 Monaco Editor (v0.18) 包装的 react 组件。

支持的语言

import { LANGUAGES } from "@aligov/components-code-editor";
console.log(LANGUAGES); // 支持的所有语言

// ["javascript", "java", "html", "json", "ini", "xml", "yaml"]

CodeEditor API

代码编辑器

import CodeEditor from '@aligov/components-code-editor';
参数名 说明 必填 类型 默认值 备注
className 类名 否 string ''
prevValue 值 是 string null
fontSize 字体大小(单位 px) number 16 null
dark 黑色主题 否 bool false
readOnly 只读模式 否 bool false
onChange prevValue 变化监听 否 (prevValue: string) => void false
language 编程语言 否 string '' 不传则以纯文本展示, 传入的值必需为支持的语言类型

CodeDiffEditor API

除了代码编辑器，还提供了 Diff 编辑器，默认是左右分栏的只读对比。

import { CodeDiffEditor } from '@aligov/components-code-editor';
参数名 说明 必填 类型 默认值 备注
language 代码语言 string ""
value 最新的内容 是 string
originalValue 旧的内容 是
options Monaco 编辑器的配置 object 见下
height 编辑器高度 string 或 number 合法的 react style 值
width 编辑器宽度 string 或 100%
className dom 容器额外 class ""
style dom 容器额外的样式 object {}

Diff 编辑器支持在 options 中传入 monaco diff 编辑器的选项，具体选项见 IDiffEditorOptions，这里设定了以下默认值：

{
  fontSize: 16,
  readOnly: true,
  enableSplitViewResizing: false
}

DEMO 列表

代码编辑器

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Button} from '@alifd/next';
import CodeEditor, { LANGUAGES } from '@aligov/components-code-editor';

const value = `public class HelloWorld {

                public static void main(String[] args) {
                    // Prints "Hello, World" to the terminal window.
                    System.out.println("Hello, World");
                }

}`;
const newvalue = `public class HelloWorld {

                public static void main(String[] args) {
                    // Prints "Hello, World" to the terminal window.
                    System.out.println("Hello, New World");
                }

}`;

class App extends Component {
  constructor(props) {
        super(props);
        this.state = {
          value,
          readOnly: false,
        }
    }

  onChange= (value) => {
    this.setState({
      value
    });
  }

  render() {
    return (
      <div>
        <CodeEditor onChange={this.onChange} value={this.state.value} language={LANGUAGES.java} readOnly={this.state.readOnly}/>
        <Button onClick={() => this.setState({value: newvalue})}>set NewValue</Button>
        <Button onClick={() => this.setState({readOnly: !this.state.readOnly})}>readOnly</Button>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

Diff

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@alifd/next';
import { LANGUAGES, CodeDiffEditor } from '@aligov/components-code-editor';

const prevValue = `{
  "a": 1,
  "b": 2
}
`;
const curValue = `{
  "a": 1.1,
  "c": 3
}
`;

class App extends Component {
  state = {
    value: curValue,
    originalValue: prevValue
  };

  switchValue = () => {
    const { value, originalValue } = this.state;
    this.setState({
      value: originalValue,
      originalValue: value,
    });
  };

  render() {
    const { value, originalValue } = this.state;

    return (
      <div>
        <CodeDiffEditor language={LANGUAGES.json} value={value} originalValue={originalValue} height={400}  />
        <div>
          <Button onClick={this.switchValue}>交换内容</Button>
        </div>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);