editor/README.md

# @apigo.cc/editor API 手册

基于 CodeMirror 6 的代码编辑器 Web Component。

---

## 1. 引入方式 (UMD 优先)

在 HTML 中引入脚本即刻注册 `<CodeEditor>` 标签。

```html
<!-- 引入依赖链（或使用 loader.js） -->
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/state@1.0.12/dist/state.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/base@1.0.8/dist/base.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/editor@1.0.1/dist/editor.min.js"></script>

<script>
    // 直接使用全局 CodeEditor 类
    console.log(CodeEditor);
</script>
```

---

## 2. 核心用法

### 直接使用
```html
<CodeEditor id="ed" lang="javascript" value="console.log('Hello');"></CodeEditor>

<script>
    ed.addEventListener('change', e => {
        console.log('最新内容:', e.detail);
    });
</script>
```

### AutoForm 集成
引入 editor 后，`AutoForm` 自动解锁 `type: 'code'`。
```javascript
State.schema = [
    { name: 'script', label: '代码', type: 'code', setting: { lang: 'json' } }
];
```

---

## 3. API 参考

### 属性 (Attributes)
- **`lang`**: `javascript`, `json`, `html`。
- **`theme`**: `dark`, `light`。
- **`readonly`**: 布尔属性。
- **`.value`**: 获取或设置编辑器文本。

---

## 开发者提示 (AI 必读)
1. **自动依赖**: 引入 editor 即代表引入了 base/bootstrap。
2. **全局变量**: UMD 模式下，`CodeEditor` 类自动挂载到 `window`。
3. **数据同步**: 修改 `.value` 属性会同步更新编辑器视图。