CodeArea代码域

CodeArea代码域

文本域用于输入一段文字。

何时使用

用于编辑或展示代码

代码演示

基本使用。

import { CodeArea, Switch, Row, Col } from 'choerodon-ui/pro';
const style = { height: 30 };
class App extends React.Component {
  state = { readOnly: true, disabled: true };
  handleChange = (value) => {
    this.setState({ readOnly: value });
  };
  handleDisabledChange = (value) => {
    this.setState({ disabled: value });
  };
  render() {
    const { readOnly, disabled } = this.state;
    return (
      <Row gutter={10}>
        <Col span={8}>
          <CodeArea style={style} />
        </Col>
        <Col span={8}>
          <CodeArea readOnly={readOnly} style={style} defaultValue="ReadOnly" />
          <Switch onChange={this.handleChange} checked={readOnly}>只读</Switch>
        </Col>
        <Col span={8}>
          <CodeArea disabled={disabled} style={style} defaultValue="Disabled" />
          <Switch onChange={this.handleDisabledChange} checked={disabled}>禁用</Switch>
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

数据绑定

import { CodeArea, DataSet } from 'choerodon-ui/pro';
const jsonText = `{
  "compilerOptions": {
    "strictNullChecks": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "declaration": true,
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "es7",
      "es2017.object"]
  },
  "exclude": [
    "node_modules",
    "lib",
    "es"
  ]
}
`;
const style = { height: 550 };
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'content', type: 'string', defaultValue: jsonText, required: true },
    ],
  });
  render() {
    return <CodeArea dataSet={this.ds} name="content" readOnly style={style} />;
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

Javascript格式化

使用快捷键格式化代码，要传入一个 formatter 对象。默认的格式化快捷键是Alt + F，去格式化快捷键是Alt + R，可以通过属性手动配置。

import { CodeArea, DataSet } from 'choerodon-ui/pro';
// 引入格式化器
import JSFormatter from 'choerodon-ui/pro/lib/code-area/formatters/JSFormatter';
// 引入 javascript lint
import 'choerodon-ui/pro/lib/code-area/lint/javascript';
// 处理 codemirror 的SSR问题， 如无需SSR，请用import代替require;
if (typeof window !== 'undefined') {
  // 提供对应语言的语法高亮
  require('codemirror/mode/javascript/javascript');
}
const options = { mode: 'javascript' };
const jsText = `function getOptions() {
  var options = {
    "compilerOptions": {
      "strictNullChecks": true,
      "moduleResolution": "node",
      "allowSyntheticDefaultImports": true,
      "experimentalDecorators": true,
      "jsx": "preserve",
      "noUnusedParameters": true,
      "noUnusedLocals": true,
      "declaration": true,
      "target": "es6",
      "lib": [
        "dom",
        "dom.iterable",
        "es7",
        "es2017.object"
      ]
    },
    "exclude": [
      "node_modules",
      "lib",
      "es"
    ]
  };
  return options;
}
`;
const jsStyle = { height: 500 };
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [{ name: 'content', type: 'string', defaultValue: jsText, required: true }],
  });
  render() {
    return (
      <div>
        <h4>Javascript</h4>
        <CodeArea
          dataSet={this.ds}
          name="content"
          style={jsStyle}
          formatter={JSFormatter}
          options={options}
        />
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

HTML格式化

使用快捷键格式化代码，要传入一个 formatter 对象。默认的格式化快捷键是Alt + F，去格式化快捷键是Alt + R，可以通过属性手动配置。

import { CodeArea, DataSet } from 'choerodon-ui/pro';
// 引入格式化器
import HTMLFormatter from 'choerodon-ui/pro/lib/code-area/formatters/HTMLFormatter';
// 引入 html lint
import 'choerodon-ui/pro/lib/code-area/lint/html';
// 处理 codemirror 的SSR问题， 如无需SSR，请用import代替require;
if (typeof window !== 'undefined') {
  // 提供对应语言的语法高亮
  require('codemirror/mode/htmlmixed/htmlmixed');
}
const options = { mode: 'htmlmixed' };
const htmlText = `<div class="demo-wrapper">
    <span id="demo">Demo</span>
</div>
<script>
var demo = document.getElementById('demo');
demo.style.cssText = 'color: red;';
</script>
`;
const htmlStyle = { height: 200 };
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [{ name: 'content', type: 'string', defaultValue: htmlText, required: true }],
  });
  render() {
    return (
      <div>
        <h4>HTML</h4>
        <CodeArea
          dataSet={this.ds}
          name="content"
          style={htmlStyle}
          formatter={HTMLFormatter}
          options={options}
        />
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

受控代码框

受控代码框。

import { CodeArea } from 'choerodon-ui/pro';
const style = { height: 30 };
class App extends React.Component {
  state = {
    value: 'Controlled Value',
  }
  handleChange = (value) => {
    this.setState({ value });
  }
  render() {
    return <CodeArea value={this.state.value} style={style} onChange={this.handleChange} />;
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

主题

使用不同主题。

import { CodeArea, Switch, DataSet } from 'choerodon-ui/pro';
// 这两个主题不是组件内置的主题，需要手动引入
import 'codemirror/theme/material.css';
import 'codemirror/theme/idea.css';
const jsonText = `{
  "compilerOptions": {
    "strictNullChecks": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "declaration": true,
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "es7",
      "es2017.object"]
  },
  "exclude": [
    "node_modules",
    "lib",
    "es"
  ]
}
`;
const style = { height: 525 };
class App extends React.Component {
  state = {
    theme: 'idea',
  }
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'content', type: 'string', defaultValue: jsonText, required: true },
    ],
  });
  handleThemeChange = (value) => {
    this.setState({ theme: value ? 'material' : 'idea' });
  }
  render() {
    return (
      <div>
        <CodeArea
          dataSet={this.ds}
          name="content"
          options={{ theme: this.state.theme }}
          style={style}
        />
        <Switch onChange={this.handleThemeChange} unCheckedChildren="idea">material</Switch>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

JSON格式化

使用快捷键格式化代码，要传入一个 formatter 对象。默认的格式化快捷键是Alt + F，去格式化快捷键是Alt + R，可以通过属性手动配置。

import { CodeArea, DataSet } from 'choerodon-ui/pro';
// 引入格式化器
import JSONFormatter from 'choerodon-ui/pro/lib/code-area/formatters/JSONFormatter';
// 引入 json lint
import 'choerodon-ui/pro/lib/code-area/lint/json';
// 处理 codemirror 的SSR问题， 如无需SSR，请用import代替require;
if (typeof window !== 'undefined') {
  // 提供对应语言的语法高亮
  require('codemirror/mode/javascript/javascript');
}
const options = { mode: { name: 'javascript', json: true } };
const jsonText = `{
  "compilerOptions": {
    "strictNullChecks": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "declaration": true,
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "es7",
      "es2017.object"
    ]
  },
  "exclude": [
    "node_modules",
    "lib",
    "es"
  ]
}
`;
const jsonStyle = { height: 500 };
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [{ name: 'content', type: 'string', defaultValue: jsonText, required: true }],
  });
  render() {
    return (
      <div>
        <h4>JSON</h4>
        <CodeArea
          dataSet={this.ds}
          name="content"
          style={jsonStyle}
          formatter={JSONFormatter}
          options={options}
        />
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

YAML格式化

使用快捷键格式化代码，要传入一个 formatter 对象。默认的格式化快捷键是Alt + F，去格式化快捷键是Alt + R，可以通过属性手动配置。

import { CodeArea, DataSet } from 'choerodon-ui/pro';
// 引入格式化器，注意使用模块的默认导出
import YAMLFormatter from 'choerodon-ui/pro/lib/code-area/formatters/YAMLFormatter';
// 引入 yaml lint
import 'choerodon-ui/pro/lib/code-area/lint/yaml';
// 处理 codemirror 的SSR问题， 如无需SSR，请用import代替require;
if (typeof window !== 'undefined') {
  // 提供对应语言的语法高亮
  require('codemirror/mode/yaml/yaml');
}
const options = { mode: 'yaml' };
const yamlText = `YAML:
  - A human-readable data serialization language
  - https://en.wikipedia.org/wiki/YAML
yaml:
  - A complete JavaScript implementation
  - https://www.npmjs.com/package/yaml
`;
const yamlStyle = { height: 200 };
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [{ name: 'content', type: 'string', defaultValue: yamlText, required: true }],
  });
  render() {
    return (
      <div>
        <h4>YAML</h4>
        <CodeArea
          dataSet={this.ds}
          name="content"
          style={yamlStyle}
          formatter={YAMLFormatter}
          options={options}
        />
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

API

CodeArea

属性	说明	类型	默认值
options	编辑器配置，详见CodeMirror Options	object
formatHotKey	格式化快捷键	string	`Alt+F`
unFormatHotKey	清除格式化快捷键	string	`Alt+R`
formatter	`CodeAreaFormatter`类的实例，用于格式化	CodeAreaFormatter	`new JSONFormatter()`

更多属性请参考 FormField。

自定义主题

组件内置'neat'和'monokai'两个主题，使用更多主题需要引入对应的样式文件，如下：

// style.less
@import '~codemirror/theme/material.css';

或在*.js文件中引用

import 'codemirror/theme/material.css';

所有可用主题请参考 CodeMirror Themes。

CodeArea 代码域

CodeArea代码域

何时使用

代码演示

API

CodeArea

自定义主题

更多编辑器配置项