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` (压缩)。
|