[{"data":1,"prerenderedAt":304},["ShallowReactive",2],{"quirekit-doc:\u002Fguide\u002Fquick-start":3},{"id":4,"title":5,"body":6,"description":294,"extension":295,"keywords":296,"locale":297,"meta":298,"navigation":118,"order":38,"path":299,"section":300,"seo":301,"stem":302,"__hash__":303},"docs\u002Fguide\u002Fquick-start.zh-CN.md","快速开始",{"type":7,"value":8,"toc":288},"minimark",[9,19,23,41,44,47,54,196,210,213,216,220,239,242,259,266,284],[10,11,12,13,18],"p",{},"这一页创建一个能输入文字的编辑器，使用 Core、常用内容扩展和浏览器原生 DOM 视图。Vue 项目可以直接跟随",[14,15,17],"a",{"href":16},"\u002Fbuild\u002Fproject","单组件教程","。",[20,21,22],"h2",{"id":22},"安装基础能力",[24,25,31],"pre",{"className":26,"code":27,"filename":28,"language":29,"meta":30,"style":30},"language-sh shiki shiki-themes github-light github-light github-dark","pnpm add @quirekit\u002Fcore@alpha @quirekit\u002Fstarter-kit@alpha @quirekit\u002Fdom-view@alpha @quirekit\u002Fpm-view@alpha\n","终端","sh","",[32,33,34],"code",{"__ignoreMap":30},[35,36,39],"span",{"class":37,"line":38},"line",1,[35,40,27],{},[10,42,43],{},"这些基础包均为 MIT，使用同一发布批次。Core 提供实例与命令；StarterKit 提供段落、标题和常用格式；DOM 视图接收浏览器输入，PM 基础样式处理空白与选区显示。",[20,45,46],{"id":46},"创建编辑器",[10,48,49,50,53],{},"页面中准备一个 ",[32,51,52],{},"id=\"editor\""," 的元素，在它出现后创建实例：",[24,55,60],{"className":56,"code":57,"filename":58,"language":59,"meta":30,"style":30},"language-ts shiki shiki-themes github-light github-light github-dark","import { Editor } from '@quirekit\u002Fcore'\nimport { StarterKit } from '@quirekit\u002Fstarter-kit'\nimport { DomViewExtension } from '@quirekit\u002Fdom-view'\nimport '@quirekit\u002Fpm-view\u002Fstyle\u002Fprosemirror.css'\n\nconst editor = new Editor({\n  element: document.getElementById('editor'),\n  mode: 'dom',\n  extensions: [StarterKit, DomViewExtension],\n  content: '\u003Cp>Hello, QuireKit.\u003C\u002Fp>',\n})\n","创建实例","ts",[32,61,62,79,92,105,113,120,143,161,173,179,190],{"__ignoreMap":30},[35,63,64,68,72,75],{"class":37,"line":38},[35,65,67],{"class":66},"sDD9d","import",[35,69,71],{"class":70},"sVPnS"," { Editor } ",[35,73,74],{"class":66},"from",[35,76,78],{"class":77},"s-HEn"," '@quirekit\u002Fcore'\n",[35,80,82,84,87,89],{"class":37,"line":81},2,[35,83,67],{"class":66},[35,85,86],{"class":70}," { StarterKit } ",[35,88,74],{"class":66},[35,90,91],{"class":77}," '@quirekit\u002Fstarter-kit'\n",[35,93,95,97,100,102],{"class":37,"line":94},3,[35,96,67],{"class":66},[35,98,99],{"class":70}," { DomViewExtension } ",[35,101,74],{"class":66},[35,103,104],{"class":77}," '@quirekit\u002Fdom-view'\n",[35,106,108,110],{"class":37,"line":107},4,[35,109,67],{"class":66},[35,111,112],{"class":77}," '@quirekit\u002Fpm-view\u002Fstyle\u002Fprosemirror.css'\n",[35,114,116],{"class":37,"line":115},5,[35,117,119],{"emptyLinePlaceholder":118},true,"\n",[35,121,123,126,130,133,136,140],{"class":37,"line":122},6,[35,124,125],{"class":66},"const",[35,127,129],{"class":128},"sUNQB"," editor",[35,131,132],{"class":66}," =",[35,134,135],{"class":66}," new",[35,137,139],{"class":138},"sgQzM"," Editor",[35,141,142],{"class":70},"({\n",[35,144,146,149,152,155,158],{"class":37,"line":145},7,[35,147,148],{"class":70},"  element: document.",[35,150,151],{"class":138},"getElementById",[35,153,154],{"class":70},"(",[35,156,157],{"class":77},"'editor'",[35,159,160],{"class":70},"),\n",[35,162,164,167,170],{"class":37,"line":163},8,[35,165,166],{"class":70},"  mode: ",[35,168,169],{"class":77},"'dom'",[35,171,172],{"class":70},",\n",[35,174,176],{"class":37,"line":175},9,[35,177,178],{"class":70},"  extensions: [StarterKit, DomViewExtension],\n",[35,180,182,185,188],{"class":37,"line":181},10,[35,183,184],{"class":70},"  content: ",[35,186,187],{"class":77},"'\u003Cp>Hello, QuireKit.\u003C\u002Fp>'",[35,189,172],{"class":70},[35,191,193],{"class":37,"line":192},11,[35,194,195],{"class":70},"})\n",[10,197,198,201,202,205,206,209],{},[32,199,200],{},"element"," 决定放在哪里，",[32,203,204],{},"extensions"," 决定支持什么内容与行为，",[32,207,208],{},"content"," 提供初始正文。现在点击文字就能输入，也可以用快捷键加粗和撤销。",[20,211,212],{"id":212},"试用按钮与内容",[10,214,215],{},"下面在同一个编辑器上增加了加粗、撤销与下载按钮。选中文字，点击加粗，再撤销。下载 JSON 可以看到实际修改后的文档结构。",[217,218],"docs-demo",{"name":219},"core\u002Feditor",[10,221,222,223,226,227,230,231,234,235,238],{},"这里的 ",[32,224,225],{},"core\u002Feditor.vue"," 放按钮，",[32,228,229],{},"core\u002Fcreate.ts"," 创建实例，",[32,232,233],{},"core\u002Fshortcuts.ts"," 演示扩展快捷键，",[32,236,237],{},"shared\u002Fdownload.ts"," 负责下载。源码文件选择器可按需查阅；带控件的示例另需 UI 主题与样式配置。",[20,240,241],{"id":241},"离开页面时释放",[24,243,246],{"className":56,"code":244,"filename":245,"language":59,"meta":30,"style":30},"editor.destroy()\n","页面或组件退出时",[32,247,248],{"__ignoreMap":30},[35,249,250,253,256],{"class":37,"line":38},[35,251,252],{"class":70},"editor.",[35,254,255],{"class":138},"destroy",[35,257,258],{"class":70},"()\n",[10,260,261,262,18],{},"不要在创建后立刻销毁；在组件卸载或结束使用时调用。示例里的编辑只保留在当前会话，自己的产品需要另外接入",[14,263,265],{"href":264},"\u002Fguide\u002Fpersistence","保存与恢复",[10,267,268,269,273,274,278,279,283],{},"接下来可以读 ",[14,270,272],{"href":271},"\u002Fguide\u002Fvue","Vue 接入","、",[14,275,277],{"href":276},"\u002Fconcepts\u002Fdocument","文档与 Schema","，或沿",[14,280,282],{"href":281},"\u002Fbuild","构建自己的编辑器","加入 Canvas 和产品界面。",[285,286,287],"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}",{"title":30,"searchDepth":81,"depth":81,"links":289},[290,291,292,293],{"id":22,"depth":81,"text":22},{"id":46,"depth":81,"text":46},{"id":212,"depth":81,"text":212},{"id":241,"depth":81,"text":241},"安装基础包，创建编辑器，再试用输入、格式与撤销。","md",null,"zh-CN",{},"\u002Fguide\u002Fquick-start","开始使用",{"title":5,"description":294},"guide\u002Fquick-start.zh-CN","uKSLld6djPswJV3Mn7k1eK7z7gAt7rASA1d92Bs6hnM",1793045207995]