原生 DOM
createMsfeEditor() 可以直接用于普通网页。下面的 mount.ts 不依赖 Vue;Vue 文件只负责文档站的演示容器。
生命周期边界
在 DOM 容器就绪后创建,在容器被移除前调用 destroy()。销毁会释放编辑器插件、监听器和视图资源。不要在框架的每次 render 中重新创建实例。
一个实例对应一份独立内容、选区和历史。多个实例可以共享扩展定义,但各自的可变状态由实例持有。
切换文档
replaceDocument(markdown, documentId) 显式换文档并重置历史与选区。需要合并同一份文档的外部修改时,使用带版本检查的 applyChanges(),详见读取与保存。
异步任务
自定义节点的 load(attrs, signal) 可以返回资源及 release()。字段变化、卸载或销毁后,响应应遵守取消信号;过期结果不会成为当前节点的资源。持久业务请求由宿主应用管理。
DOM 与宿主责任
运行时管理 parent 内自己的编辑器节点;应用不要在每次框架更新时覆盖该区域的 innerHTML。多个编辑器使用不同 parent,并给辅助技术提供不同的 label。只共享不可变定义,不共享业务可变实例。
如果不用适配器而自行调用 createComponentHost(),宿主也要管理该 host 的销毁。先结束编辑器及挂载组件,再释放组件宿主,避免孤立 Portal / Teleport。
页面切换的完整顺序
保存或保留未保存内容 → 取消文档级业务请求 → 销毁实例 → 移除宿主容器。重新打开页面时,用保存的 Markdown 创建新实例。需要保留同一份文档历史的 UI 模式切换应调用 setMode,而不是销毁重建。
资源应归属 editor.scope、documentScope 或组件 scope 中最合适的一层;示例和取消策略见 异步资源。