[{"data":1,"prerenderedAt":377},["ShallowReactive",2],{"msfe-doc:\u002Fguide\u002Fquick-start":3},{"id":4,"title":5,"body":6,"description":364,"extension":365,"keywords":366,"locale":370,"meta":371,"navigation":124,"order":35,"path":372,"section":373,"seo":374,"stem":375,"__hash__":376},"docs\u002Fguide\u002Fquick-start.zh-CN.md","快速开始",{"type":7,"value":8,"toc":357},"minimark",[9,13,18,21,38,49,64,67,71,82,275,279,282,301,305,308,327,330,338,345,353],[10,11,12],"p",{},"这一页把 Markdown 编辑区放入你的页面：先创建实例，输入内容，再读取原文并在退出时释放。",[14,15,17],"h2",{"id":16},"_1-准备依赖","1. 准备依赖",[10,19,20],{},"当前开发版通过工作区包或本地打包产物消费，尚未承诺公共 npm 稳定发布。在包含 MSFE 包的 pnpm 工作区中，为你的应用加入依赖：",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-sh shiki shiki-themes github-light github-light github-dark","pnpm add '@quirekit\u002Fmsfe-core@workspace:*' '@quirekit\u002Fmsfe-starter-kit@workspace:*'\n","sh","",[29,30,31],"code",{"__ignoreMap":27},[32,33,36],"span",{"class":34,"line":35},"line",1,[32,37,25],{},[10,39,40,41,44,45,48],{},"Vue 应用再添加 ",[29,42,43],{},"@quirekit\u002Fmsfe-vue","；React 应用使用 ",[29,46,47],{},"@quirekit\u002Fmsfe-react","。按应用已有的框架版本安装相应 peer dependencies。",[10,50,51,52,55,56,59,60,63],{},"本地 tarball 应通过包管理器安装，并完整保留 ",[29,53,54],{},"dist"," 和 ",[29,57,58],{},"types"," 发布目录。StarterKit 的类型入口会带入它安装的插件命令声明，使用 ",[29,61,62],{},"editor.commands.toggleBold()"," 等方法不需要再为类型单独导入插件。",[10,65,66],{},"普通安装包与本仓库开发环境的依赖配置可能不同；当前发布准备尚未完成，长期运行和图表行为请以所取得版本的支持范围为准。",[14,68,70],{"id":69},"_2-创建实例","2. 创建实例",[10,72,73,74,77,78,81],{},"提供一个已挂载的 DOM 元素。",[29,75,76],{},"markdown"," 是初始文本，",[29,79,80],{},"extensions"," 决定安装哪些能力。",[22,83,87],{"className":84,"code":85,"language":86,"meta":27,"style":27},"language-ts shiki shiki-themes github-light github-light github-dark","import { createMsfeEditor } from '@quirekit\u002Fmsfe-core'\nimport { StarterKit } from '@quirekit\u002Fmsfe-starter-kit'\n\nconst parent = document.querySelector\u003CHTMLElement>('#editor')!\nconst editor = createMsfeEditor({\n  parent,\n  markdown: '# 你好，Markdown\\n\\n开始写作。',\n  mode: 'live',\n  extensions: [StarterKit],\n})\n\n\u002F\u002F 在保存动作中读取；无需每次输入都序列化全文。\nconst markdown = editor.getMarkdown()\n\n\u002F\u002F 宿主离开页面时清理。\n\u002F\u002F editor.destroy()\n","ts",[29,88,89,106,119,126,164,180,186,204,215,221,227,232,239,258,263,269],{"__ignoreMap":27},[32,90,91,95,99,102],{"class":34,"line":35},[32,92,94],{"class":93},"sDD9d","import",[32,96,98],{"class":97},"sVPnS"," { createMsfeEditor } ",[32,100,101],{"class":93},"from",[32,103,105],{"class":104},"s-HEn"," '@quirekit\u002Fmsfe-core'\n",[32,107,109,111,114,116],{"class":34,"line":108},2,[32,110,94],{"class":93},[32,112,113],{"class":97}," { StarterKit } ",[32,115,101],{"class":93},[32,117,118],{"class":104}," '@quirekit\u002Fmsfe-starter-kit'\n",[32,120,122],{"class":34,"line":121},3,[32,123,125],{"emptyLinePlaceholder":124},true,"\n",[32,127,129,132,136,139,142,146,149,152,155,158,161],{"class":34,"line":128},4,[32,130,131],{"class":93},"const",[32,133,135],{"class":134},"sUNQB"," parent",[32,137,138],{"class":93}," =",[32,140,141],{"class":97}," document.",[32,143,145],{"class":144},"sgQzM","querySelector",[32,147,148],{"class":97},"\u003C",[32,150,151],{"class":144},"HTMLElement",[32,153,154],{"class":97},">(",[32,156,157],{"class":104},"'#editor'",[32,159,160],{"class":97},")",[32,162,163],{"class":93},"!\n",[32,165,167,169,172,174,177],{"class":34,"line":166},5,[32,168,131],{"class":93},[32,170,171],{"class":134}," editor",[32,173,138],{"class":93},[32,175,176],{"class":144}," createMsfeEditor",[32,178,179],{"class":97},"({\n",[32,181,183],{"class":34,"line":182},6,[32,184,185],{"class":97},"  parent,\n",[32,187,189,192,195,198,201],{"class":34,"line":188},7,[32,190,191],{"class":97},"  markdown: ",[32,193,194],{"class":104},"'# 你好，Markdown",[32,196,197],{"class":134},"\\n\\n",[32,199,200],{"class":104},"开始写作。'",[32,202,203],{"class":97},",\n",[32,205,207,210,213],{"class":34,"line":206},8,[32,208,209],{"class":97},"  mode: ",[32,211,212],{"class":104},"'live'",[32,214,203],{"class":97},[32,216,218],{"class":34,"line":217},9,[32,219,220],{"class":97},"  extensions: [StarterKit],\n",[32,222,224],{"class":34,"line":223},10,[32,225,226],{"class":97},"})\n",[32,228,230],{"class":34,"line":229},11,[32,231,125],{"emptyLinePlaceholder":124},[32,233,235],{"class":34,"line":234},12,[32,236,238],{"class":237},"sqmzS","\u002F\u002F 在保存动作中读取；无需每次输入都序列化全文。\n",[32,240,242,244,247,249,252,255],{"class":34,"line":241},13,[32,243,131],{"class":93},[32,245,246],{"class":134}," markdown",[32,248,138],{"class":93},[32,250,251],{"class":97}," editor.",[32,253,254],{"class":144},"getMarkdown",[32,256,257],{"class":97},"()\n",[32,259,261],{"class":34,"line":260},14,[32,262,125],{"emptyLinePlaceholder":124},[32,264,266],{"class":34,"line":265},15,[32,267,268],{"class":237},"\u002F\u002F 宿主离开页面时清理。\n",[32,270,272],{"class":34,"line":271},16,[32,273,274],{"class":237},"\u002F\u002F editor.destroy()\n",[14,276,278],{"id":277},"_3-加入-vue-与操作按钮","3. 加入 Vue 与操作按钮",[10,280,281],{},"下面增加模式切换、撤销和读取按钮。先输入，再切换源码与实时模式；点击“读取 Markdown”查看当前原文。",[10,283,284,285,288,289,292,293,296,297,300],{},"源码里的 ",[29,286,287],{},"basic\u002Feditor.vue"," 负责界面和实例，",[29,290,291],{},"shared\u002Fappearance.ts"," 配置外观，",[29,294,295],{},"shared\u002Fmessages.ts"," 提供示例文案，",[29,298,299],{},"shared\u002Ftypes.ts"," 定义语言类型。只需要查看某一部分时，在源码页签选择对应文件即可。",[302,303],"msfe-demo",{"name":304},"basic\u002Feditor",[14,306,307],{"id":307},"接下来",[10,309,310,311,316,317,321,322,326],{},"阅读 ",[312,313,315],"a",{"href":314},"\u002Fguide\u002Fvue","Vue 接入","或 ",[312,318,320],{"href":319},"\u002Fguide\u002Freact","React 接入","，了解框架生命周期与自定义组件。需要接入现有存储时，继续看",[312,323,325],{"href":324},"\u002Fguide\u002Fsaving","读取与保存","。",[14,328,329],{"id":329},"完成接入前检查",[10,331,332,333,337],{},"给 parent 实际宽度和合理最小高度；给编辑区提供 label；把清理接到路由\u002F组件生命周期。默认功能皮肤不等于你的产品主题，按 ",[312,334,336],{"href":335},"\u002Fcustomization\u002Ftheme","主题教程"," 接入设计系统。",[10,339,340,341,344],{},"工作区代码直接引入时注意 CodeMirror state\u002Fview 的单实例依赖。生产应用不要从 ",[29,342,343],{},"packages\u002F...\u002Fsrc"," 私有路径导入；使用公共包入口和自己的构建产物。本站源码 alias 只是仓库开发环境配置。",[10,346,347,348,352],{},"接入完成后验证输入、模式切换、只读、保存和卸载。然后依据 ",[312,349,351],{"href":350},"\u002Ffeatures\u002Fcatalog","功能目录"," 选择可选功能，而不是在第一步复制整个示例应用。",[354,355,356],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sqmzS, html code.shiki .sqmzS{--shiki-default:#6A737D;--shiki-light:#6A737D;--shiki-dark:#6A737D}",{"title":27,"searchDepth":108,"depth":108,"links":358},[359,360,361,362,363],{"id":16,"depth":108,"text":17},{"id":69,"depth":108,"text":70},{"id":277,"depth":108,"text":278},{"id":307,"depth":108,"text":307},{"id":329,"depth":108,"text":329},"用公开包入口创建第一个编辑器，完成编辑、读取与清理。","md",[367,368,369],"安装","starter kit","入门","zh-CN",{},"\u002Fguide\u002Fquick-start","开始使用",{"title":5,"description":364},"guide\u002Fquick-start.zh-CN","iqDPJPDGDSEt_3OaPFzzLh5P4er7Ndl0cyVJk32suu4",1793046310952]