62 lines
1.5 KiB
Markdown
62 lines
1.5 KiB
Markdown
# @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` 属性会同步更新编辑器视图。
|