这一页把 Markdown 编辑区放入你的页面：先创建实例，输入内容，再读取原文并在退出时释放。
1. 准备依赖
当前开发版通过工作区包或本地打包产物消费，尚未承诺公共 npm 稳定发布。在包含 MSFE 包的 pnpm 工作区中，为你的应用加入依赖：
pnpm add '@quirekit/msfe-core@workspace:*' '@quirekit/msfe-starter-kit@workspace:*'
Vue 应用再添加 @quirekit/msfe-vue；React 应用使用 @quirekit/msfe-react。按应用已有的框架版本安装相应 peer dependencies。
本地 tarball 应通过包管理器安装，并完整保留 dist 和 types 发布目录。StarterKit 的类型入口会带入它安装的插件命令声明，使用 editor.commands.toggleBold() 等方法不需要再为类型单独导入插件。
普通安装包与本仓库开发环境的依赖配置可能不同；当前发布准备尚未完成，长期运行和图表行为请以所取得版本的支持范围为准。
2. 创建实例
提供一个已挂载的 DOM 元素。markdown 是初始文本，extensions 决定安装哪些能力。
import { createMsfeEditor } from '@quirekit/msfe-core'
import { StarterKit } from '@quirekit/msfe-starter-kit'
const parent = document.querySelector<HTMLElement>('#editor')!
const editor = createMsfeEditor({
parent,
markdown: '# 你好，Markdown\n\n开始写作。',
mode: 'live',
extensions: [StarterKit],
})
// 在保存动作中读取；无需每次输入都序列化全文。
const markdown = editor.getMarkdown()
// 宿主离开页面时清理。
// editor.destroy()
3. 加入 Vue 与操作按钮
下面增加模式切换、撤销和读取按钮。先输入，再切换源码与实时模式；点击“读取 Markdown”查看当前原文。
源码里的 basic/editor.vue 负责界面和实例，shared/appearance.ts 配置外观，shared/messages.ts 提供示例文案，shared/types.ts 定义语言类型。只需要查看某一部分时，在源码页签选择对应文件即可。
接下来
阅读 Vue 接入或 React 接入，了解框架生命周期与自定义组件。需要接入现有存储时，继续看读取与保存。
完成接入前检查
给 parent 实际宽度和合理最小高度；给编辑区提供 label；把清理接到路由/组件生命周期。默认功能皮肤不等于你的产品主题，按 主题教程 接入设计系统。
工作区代码直接引入时注意 CodeMirror state/view 的单实例依赖。生产应用不要从 packages/.../src 私有路径导入；使用公共包入口和自己的构建产物。本站源码 alias 只是仓库开发环境配置。
接入完成后验证输入、模式切换、只读、保存和卸载。然后依据 功能目录 选择可选功能，而不是在第一步复制整个示例应用。