@apigo.cc/editor API 手册

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

1. 引入方式 (UMD 优先)

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

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

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

2. 核心用法

直接使用

<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'。

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 属性会同步更新编辑器视图。