2.0.0 • Published 5 years ago

@aligov/components-code-editor v2.0.0

Weekly downloads
5
License
MIT
Repository
-
Last release
5 years ago

代码编辑器

@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''
prevValuestringnull
fontSize字体大小(单位 px)number16null
dark黑色主题boolfalse
readOnly只读模式boolfalse
onChangeprevValue 变化监听(prevValue: string) => voidfalse
language编程语言string''不传则以纯文本展示, 传入的值必需为支持的语言类型

CodeDiffEditor API

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

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

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

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