60 lines
1.6 KiB
Markdown
60 lines
1.6 KiB
Markdown
# @web/editor
|
||
|
||
CodeMirror 6 封装的现代代码编辑器组件，专为 `@web/base` 和 `@web/state` 生态设计。原生 ESM，零打包开箱即用。
|
||
|
||
## 核心特性
|
||
- **轻量原生**：基于 ESM，直接在浏览器运行。
|
||
- **AutoForm 集成**：作为 `AutoForm` 的高阶组件，支持 `type: 'CodeEditor'`。
|
||
- **响应式绑定**：深度集成 `@web/state` 的 `$bind` 机制。
|
||
- **语法支持**：内置 JS、JSON、HTML 高亮。
|
||
- **双轨产物**：提供源码级 `editor.js` 和压缩版 `editor.min.js`。
|
||
|
||
## 安装与引入
|
||
严禁使用 `npm install`。请通过 `loader.js` 或 `importmap` 引入。
|
||
|
||
### Importmap 配置
|
||
```json
|
||
{
|
||
"imports": {
|
||
"@web/editor": "/path/to/editor.js"
|
||
}
|
||
}
|
||
```
|
||
|
||
## API 手册
|
||
|
||
### `<CodeEditor>` 组件
|
||
#### 属性 (Attributes)
|
||
- `lang`: 语言类型，支持 `javascript` (默认), `json`, `html`。
|
||
- `theme`: 主题，支持 `dark` (默认, One Dark), `light`。
|
||
- `value`: 初始值。
|
||
- `readonly`: 是否只读。
|
||
|
||
#### 属性 (Properties)
|
||
- `value`: 获取或设置编辑器文本内容。
|
||
- `view`: 获取底层的 CodeMirror `EditorView` 实例。
|
||
|
||
#### 事件 (Events)
|
||
- `input`: 内容变化时触发（符合标准表单行为）。
|
||
- `change`: 内容变化时触发，`event.detail` 包含最新内容。
|
||
|
||
## 使用示例
|
||
|
||
### 基础用法
|
||
```html
|
||
<CodeEditor lang="json" value='{"test": 123}'></CodeEditor>
|
||
```
|
||
|
||
### 在 AutoForm 中使用
|
||
```javascript
|
||
const schema = [
|
||
{ name: 'config', label: '配置', type: 'CodeEditor', setting: { lang: 'json' } }
|
||
];
|
||
```
|
||
|
||
## 构建
|
||
```bash
|
||
npm run build
|
||
```
|
||
产出 `dist/editor.js` (源码) 和 `dist/editor.min.js` (压缩)。
|