--- category: Pro Components type: Data Entry title: CodeArea subtitle: 代码域 --- 文本域用于输入一段文字。 ## 何时使用 用于编辑或展示代码 ## API ### CodeArea | 属性 | 说明 | 类型 | 默认值 | | ----- | -------- | -------- | ------------------ | | options | 编辑器配置,详见[CodeMirror Options](https://codemirror.net/doc/manual.html#config)| object | | | formatHotKey | 格式化快捷键 | string | `Alt+F` | | unFormatHotKey | 清除格式化快捷键 | string | `Alt+R` | | formatter | `CodeAreaFormatter`类的实例,用于格式化 | CodeAreaFormatter | `new JSONFormatter()` | | editorDidMount | 在实例挂载前回调函数 | (editor: IInstance, value: string, cb: () => void) => void; | | | themeSwitch | 默认主题切换设置( options 中设置 theme 或者不设置 themeSwitch,则不显示主题切换按钮)。不设置,默认 idea 主题,可选值 `idea` \| `material` | string | | | title | 标题 | ReactNode | | | placeholder | 占位词 | string | | 更多属性请参考 [FormField](/components-pro/field/#FormField)。 ### 自定义主题 组件内置`'neat'` `'idea'` `'material'`三个主题,默认 `'idea'`,使用更多主题需要引入对应的样式文件,如下: ```less // style.less @import '~codemirror/theme/eclipse.css'; ``` 或在`*.js`文件中引用 ```js import 'codemirror/theme/eclipse.css'; ``` 所有可用主题请参考 [CodeMirror Themes](https://codemirror.net/demo/theme.html)。 ### 更多编辑器配置项 更多编辑器配置可以直接作为输入属性传递给组件,如下: ```ts const options = { tabSize: 4, viewportMargin: Infinity }; <CodeArea options={options} /> ``` 所有可用的配置项请参考 [CodeMirror Options](https://codemirror.net/doc/manual.html#config)。