CodeArea 代码域

代码编辑器。

何时使用

用于输入表单域代码内容，实现对应语言高亮时。

代码演示

基本使用

基本使用。

CodeArea代码域 - 图1

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { CodeArea, Switch, Row, Col } from 'choerodon-ui/pro';
  5. ​
  6. const style = { height: 60 };
  7. ​
  8. class App extends React.Component {
  9.   state = { readOnly: true, disabled: true };
  10. ​
  11.   handleChange = (value) => {
  12.     this.setState({ readOnly: value });
  13.   };
  14. ​
  15.   handleDisabledChange = (value) => {
  16.     this.setState({ disabled: value });
  17.   };
  18. ​
  19.   render() {
  20.     const { readOnly, disabled } = this.state;
  21.     return (
  22.       <Row gutter={10}>
  23.         <Col span={8}>
  24.           <CodeArea style={style} />
  25.         </Col>
  26.         <Col span={8}>
  27.           <CodeArea readOnly={readOnly} style={style} defaultValue="ReadOnly" />
  28.           <Switch onChange={this.handleChange} checked={readOnly}>
  29.             只读
  30.           </Switch>
  31.         </Col>

受控代码框

受控代码框。

CodeArea代码域 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { CodeArea } from 'choerodon-ui/pro';
  4. ​
  5. const style = { height: 80 };
  6. ​
  7. class App extends React.Component {
  8.   state = {
  9.     value: 'Controlled Value',
  10.   };
  11. ​
  12.   handleChange = (value) => {
  13.     this.setState({ value });
  14.   };
  15. ​
  16.   render() {
  17.     return (
  18.       <CodeArea
  19.         value={this.state.value}
  20.         style={style}
  21.         onChange={this.handleChange}
  22.       />
  23.     );
  24.   }
  25. }
  26. ​
  27. ReactDOM.render(<App />, document.getElementById('container'));
  28. ​

数据绑定

数据绑定

CodeArea代码域 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { CodeArea, DataSet } from 'choerodon-ui/pro';
  4. ​
  5. const jsonText = `{
  6.   "compilerOptions": {
  7.     "strictNullChecks": true,
  8.     "moduleResolution": "node",
  9.     "allowSyntheticDefaultImports": true,
  10.     "experimentalDecorators": true,
  11.     "jsx": "preserve",
  12.     "noUnusedParameters": true,
  13.     "noUnusedLocals": true,
  14.     "declaration": true,
  15.     "target": "es6",
  16.     "lib": [
  17.       "dom",
  18.       "dom.iterable",
  19.       "es7",
  20.       "es2017.object"]
  21.   },
  22.   "exclude": [
  23.     "node_modules",
  24.     "lib",
  25.     "es"
  26.   ]
  27. }
  28. `;
  29. ​
  30. const style = { height: 550 };
  31. ​
  32. class App extends React.Component {
  33.   ds = new DataSet({
  34.     autoCreate: true,
  35.     fields: [
  36.       { name: 'content', type: 'string', defaultValue: jsonText, required: true, readOnly: true },
  37.     ],
  38.   });
  39. ​
  40.   render() {
  41.     return <CodeArea dataSet={this.ds} name="content" style={style} />;
  42.   }
  43. }
  44. ​
  45. ReactDOM.render(
  46.   <App />,
  47.   document.getElementById('container')
  48. );
  49. ​

主题

使用不同主题。

CodeArea代码域 - 图4

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { CodeArea, Switch, DataSet } from 'choerodon-ui/pro';
  5. // 这两个主题不是组件内置的主题，需要手动引入
  6. import 'codemirror/theme/material.css';
  7. import 'codemirror/theme/idea.css';
  8. // 引入 javascript lint
  9. import 'choerodon-ui/pro/lib/code-area/lint/javascript';
  10. // 处理 codemirror 的SSR问题， 如无需SSR，请用import代替require;
  11. import 'codemirror/mode/javascript/javascript';
  12. ​
  13. const jsonText = `{
  14.   "compilerOptions": {
  15.     "strictNullChecks": true,
  16.     "moduleResolution": "node",
  17.     "allowSyntheticDefaultImports": true,
  18.     "experimentalDecorators": true,
  19.     "jsx": "preserve",
  20.     "noUnusedParameters": true,
  21.     "noUnusedLocals": true,
  22.     "declaration": true,
  23.     "target": "es6",
  24.     "lib": [
  25.       "dom",
  26.       "dom.iterable",
  27.       "es7",
  28.       "es2017.object"]
  29.   },
  30.   "exclude": [
  31.     "node_modules",
  32.     "lib",
  33.     "es"
  34.   ]
  35. }
  36. `;
  37. ​
  38. const style = { height: 525 };
  39. ​
  40. class App extends React.Component {
  41.   state = {
  42.     theme: 'idea',
  43.   };
  44. ​
  45.   ds = new DataSet({
  46.     autoCreate: true,
  47.     fields: [
  48.       {
  49.         name: 'content',
  50.         type: 'string',
  51.         defaultValue: jsonText,
  52.         required: true,
  53.       },
  54.     ],
  55.   });
  56. ​

Javascript格式化

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

CodeArea代码域 - 图5

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { CodeArea, DataSet } from 'choerodon-ui/pro';
  5. // 引入格式化器
  6. import JSFormatter from 'choerodon-ui/pro/lib/code-area/formatters/JSFormatter';
  7. // 引入 javascript lint
  8. import 'choerodon-ui/pro/lib/code-area/lint/javascript';
  9. // 处理 codemirror 的SSR问题， 如无需SSR，请用import代替require;
  10. import 'codemirror/mode/javascript/javascript';
  11. // if (typeof window !== 'undefined') {
  12. //   // 提供对应语言的语法高亮
  13. //   require('codemirror/mode/javascript/javascript');
  14. // }
  15. ​
  16. const options = { mode: 'javascript' };
  17. ​
  18. const jsText = `function getOptions() {
  19.   var options = {
  20.     "compilerOptions": {
  21.       "strictNullChecks": true,
  22.       "moduleResolution": "node",
  23.       "allowSyntheticDefaultImports": true,
  24.       "experimentalDecorators": true,
  25.       "jsx": "preserve",
  26.       "noUnusedParameters": true,
  27.       "noUnusedLocals": true,
  28.       "declaration": true,
  29.       "target": "es6",
  30.       "lib": [
  31.         "dom",
  32.         "dom.iterable",
  33.         "es7",
  34.         "es2017.object"
  35.       ]
  36.     },
  37.     "exclude": [
  38.       "node_modules",
  39.       "lib",
  40.       "es"
  41.     ]
  42.   };
  43. ​
  44.   return options;
  45. }
  46. `;
  47. ​
  48. const jsStyle = { height: 500 };
  49. ​
  50. class App extends React.Component {
  51.   ds = new DataSet({
  52.     autoCreate: true,
  53.     fields: [
  54.       { name: 'content', type: 'string', defaultValue: jsText, required: true },
  55.     ],

JSON格式化

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

CodeArea代码域 - 图6

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { CodeArea, DataSet } from 'choerodon-ui/pro';
  5. // 引入格式化器
  6. import JSONFormatter from 'choerodon-ui/pro/lib/code-area/formatters/JSONFormatter';
  7. // 引入 json lint
  8. import 'choerodon-ui/pro/lib/code-area/lint/json';
  9. // 处理 codemirror 的SSR问题， 如无需SSR，请用import代替require;
  10. import 'codemirror/mode/javascript/javascript';
  11. // if (typeof window !== 'undefined') {
  12. //   // 提供对应语言的语法高亮
  13. //   require('codemirror/mode/javascript/javascript');
  14. // }
  15. ​
  16. const options = { mode: { name: 'javascript', json: true } };
  17. ​
  18. const jsonText = `{
  19.   "compilerOptions": {
  20.     "strictNullChecks": true,
  21.     "moduleResolution": "node",
  22.     "allowSyntheticDefaultImports": true,
  23.     "experimentalDecorators": true,
  24.     "jsx": "preserve",
  25.     "noUnusedParameters": true,
  26.     "noUnusedLocals": true,
  27.     "declaration": true,
  28.     "target": "es6",
  29.     "lib": [
  30.       "dom",
  31.       "dom.iterable",
  32.       "es7",
  33.       "es2017.object"
  34.     ]
  35.   },
  36.   "exclude": [
  37.     "node_modules",
  38.     "lib",
  39.     "es"
  40.   ]
  41. }
  42. `;
  43. ​
  44. const jsonStyle = { height: 500 };
  45. ​
  46. class App extends React.Component {
  47.   ds = new DataSet({
  48.     autoCreate: true,
  49.     fields: [
  50.       {
  51.         name: 'content',
  52.         type: 'string',
  53.         defaultValue: jsonText,
  54.         required: true,
  55.       },

HTML格式化

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

CodeArea代码域 - 图7

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { CodeArea, DataSet } from 'choerodon-ui/pro';
  5. // 引入格式化器
  6. import HTMLFormatter from 'choerodon-ui/pro/lib/code-area/formatters/HTMLFormatter';
  7. // 引入 html lint
  8. import 'choerodon-ui/pro/lib/code-area/lint/html';
  9. // 处理 codemirror 的SSR问题， 如无需SSR，请用import代替require;
  10. import 'codemirror/mode/htmlmixed/htmlmixed';
  11. // if (typeof window !== 'undefined') {
  12. //   // 提供对应语言的语法高亮
  13. //   require('codemirror/mode/htmlmixed/htmlmixed');
  14. // }
  15. ​
  16. const options = { mode: 'htmlmixed' };
  17. ​
  18. const htmlText = `<div class="demo-wrapper">
  19.     <span id="demo">Demo</span>
  20. </div>
  21. <script>
  22. var demo = document.getElementById('demo');
  23. demo.style.cssText = 'color: red;';
  24. </script>
  25. `;
  26. ​
  27. const htmlStyle = { height: 200 };
  28. ​
  29. class App extends React.Component {
  30.   ds = new DataSet({
  31.     autoCreate: true,
  32.     fields: [
  33.       {
  34.         name: 'content',
  35.         type: 'string',
  36.         defaultValue: htmlText,
  37.         required: true,
  38.       },
  39.     ],
  40.   });

YAML格式化

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

CodeArea代码域 - 图8

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { CodeArea, DataSet } from 'choerodon-ui/pro';
  5. // 引入格式化器，注意使用模块的默认导出
  6. import YAMLFormatter from 'choerodon-ui/pro/lib/code-area/formatters/YAMLFormatter';
  7. // 引入 yaml lint
  8. import 'choerodon-ui/pro/lib/code-area/lint/yaml';
  9. // 处理 codemirror 的SSR问题， 如无需SSR，请用import代替require;
  10. import 'codemirror/mode/yaml/yaml';
  11. // if (typeof window !== 'undefined') {
  12. //   // 提供对应语言的语法高亮
  13. //   require('codemirror/mode/yaml/yaml');
  14. // }
  15. ​
  16. const options = { mode: 'yaml' };
  17. ​
  18. const yamlText = `YAML:
  19.   - A human-readable data serialization language
  20.   - https://en.wikipedia.org/wiki/YAML
  21. yaml:
  22.   - A complete JavaScript implementation
  23.   - https://www.npmjs.com/package/yaml
  24. `;
  25. ​
  26. const yamlStyle = { height: 200 };
  27. ​
  28. class App extends React.Component {
  29.   ds = new DataSet({
  30.     autoCreate: true,
  31.     fields: [
  32.       {
  33.         name: 'content',
  34.         type: 'string',
  35.         defaultValue: yamlText,
  36.         required: true,
  37.       },
  38.     ],
  39.   });
  40. ​

API

CodeArea

属性说明类型默认值
options编辑器配置，详见CodeMirror Optionsobject
formatHotKey格式化快捷键stringAlt+F
unFormatHotKey清除格式化快捷键stringAlt+R
formatterCodeAreaFormatter类的实例，用于格式化CodeAreaFormatternew JSONFormatter()
editorDidMount在实例挂载前回调函数(editor: IInstance, value: string, cb: () => void) => void;

更多属性请参考 FormField。

自定义主题

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

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

或在*.js文件中引用

  1. import 'codemirror/theme/material.css';

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

更多编辑器配置项

更多编辑器配置可以直接作为输入属性传递给组件，如下：

  1. const options = { tabSize: 4, viewportMargin: Infinity };
  2. <CodeArea options={options} />;

所有可用的配置项请参考 CodeMirror Options。