html本身不执行业务逻辑，“基于插件的业务逻辑扩展”本质是javascript模块化机制+dom生命周期控制+编辑器/框架运行时api实现的动态能力注入。
HTML 本身不执行业务逻辑，所谓“基于插件的业务逻辑扩展”，本质是用 JavaScript 模块化机制 + DOM 生命周期控制 + 编辑器/框架运行时 API 实现的动态能力注入。硬把逻辑塞进 <script></script> 标签或拼 HTML 字符串，90% 的场景会出问题。
别依赖 document.scripts 判断插件是否加载完成
这是最常踩的坑：轮询 document.scripts 或检查 src 是否包含某字符串，根本不可靠。
-
document.scripts只记录静态解析的<script></script>标签，对import()、eval()、Web Worker 加载的代码完全无感 - CDN 地址带 hash、插件被打包合并、内联脚本没
src属性，都会让字符串匹配失效 - 脚本下载完成 ≠ 插件注册完成 —— 很多插件在
import()后还要调用editor.registerPlugin()或monaco.languages.registerCompletionItemProvider()
正确做法是查编辑器实例自身的状态：比如 tinymce.activeEditor.plugins.myPlugin 是否存在，或监听 PluginLoad 事件；Monaco 则用 monaco.editor.getLanguages().includes('mylang') 确认语言支持已注册。
动态加载必须走 import()，不是 fetch + v-html
把插件当 HTML 片段 fetch 下来再用 v-html 注入，等于放弃所有 JS 执行权和样式隔离。
- 内联
<script></script>不执行，<style></style>全局污染，XSS 风险直接暴露 - 事件绑定丢失，组件无法响应用户操作
- 无法做按需加载、tree-shaking、错误边界处理
真正可扩展的方式是让插件导出标准模块：
import('./plugins/finance-table.js').then(plugin => {
plugin.init(editor); // 显式调用初始化函数
});
插件内部应封装好生命周期钩子（如 onLoad、onUpdate），由编辑器统一调度，而不是靠 DOM 插入时机触发。
右键菜单、工具栏按钮等 UI 扩展必须耦合编辑器状态
直接往 DOM 里塞按钮或监听 contextmenu 事件，大概率失效或破坏编辑器内部状态。
- contenteditable 区域或 iframe 内部的右键事件，主页面监听不到，得注入到 iframe 的
contentDocument中 - 菜单项是否禁用，不能只看光标位置，得调用
editor.getSelection()或state.selection拿真实选区信息 - 点击后必须用编辑器提供的 API 执行操作（如
editor.formatText()），而非直接操作 DOM - 禁用原生菜单后，必须手动监听
Escape键并调用menuElement.remove()，否则用户无法退出
跨域 iframe 场景下，若无法访问 contentDocument，只能依赖编辑器是否暴露了 on('contextmenu') 这类钩子 —— 没暴露就真没法安全接管。
自定义标签解析要走编辑器的 parser 钩子，不是正则替换
像 mp-html 这类渲染器提供 onParse 钩子，就是为这事设计的：
onParse(tag, parser) {
if (tag.name === 'custom-tag') {
return { name: 'view', attrs: { class: 'custom-tag' } };
}
}
用正则全局替换 [emoji] 这种简单 case 可以用 onUpdate，但涉及嵌套结构、属性校验、上下文依赖的业务标签（如 <approval-flow></approval-flow>），必须走语法树解析流程。否则：<custom-tag><custom-tag></custom-tag></custom-tag> 这种嵌套会被正则搞乱，而 parser 能保证层级和闭合正确。
真正难的不是写插件，而是判断“这个业务逻辑该挂在哪一层”：是 DOM 层（Web Components）、编辑器层（Tinymce/Monaco 插件）、构建层（html-webpack-plugin 钩子），还是运行时层（金蝶云的 IXXXSubPlugin 接口）。选错层级，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
