2.0.0 • Published 5 years ago
@aligov/components-code-editor v2.0.0
代码编辑器
@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
}