[{"data":1,"prerenderedAt":383},["ShallowReactive",2],{"quirekit-doc:\u002Fbuild\u002Fmodel":3},{"id":4,"title":5,"body":6,"description":372,"extension":373,"keywords":374,"locale":375,"meta":376,"navigation":377,"order":46,"path":378,"section":379,"seo":380,"stem":381,"__hash__":382},"docs\u002Fbuild\u002Fmodel.zh-CN.md","理解文档模型",{"type":7,"value":8,"toc":365},"minimark",[9,18,22,25,137,159,162,166,169,178,181,185,230,237,252,255,258,266,269,323,337,348,361],[10,11,12,13,17],"p",{},"上一章把 HTML 传给 ",[14,15,16],"code",{},"content","，编辑器显示出一段文字。但 Core 内部保存的并不是页面截图，也不是一段随意拼接的 HTML，而是一棵描述内容的文档树。",[19,20,21],"h2",{"id":21},"一段文字怎样成为文档",[10,23,24],{},"例如“你好，QuireKit”是一段正文，它的 JSON 表示如下：",[26,27,33],"pre",{"className":28,"code":29,"filename":30,"language":31,"meta":32,"style":32},"language-json shiki shiki-themes github-light github-light github-dark","{\n  \"type\": \"doc\",\n  \"content\": [\n    {\n      \"type\": \"paragraph\",\n      \"content\": [{ \"type\": \"text\", \"text\": \"你好，QuireKit\" }]\n    }\n  ]\n}\n","一段正文","json","",[14,34,35,44,61,70,76,89,119,125,131],{"__ignoreMap":32},[36,37,40],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sVPnS","{\n",[36,45,47,51,54,58],{"class":38,"line":46},2,[36,48,50],{"class":49},"sUNQB","  \"type\"",[36,52,53],{"class":42},": ",[36,55,57],{"class":56},"s-HEn","\"doc\"",[36,59,60],{"class":42},",\n",[36,62,64,67],{"class":38,"line":63},3,[36,65,66],{"class":49},"  \"content\"",[36,68,69],{"class":42},": [\n",[36,71,73],{"class":38,"line":72},4,[36,74,75],{"class":42},"    {\n",[36,77,79,82,84,87],{"class":38,"line":78},5,[36,80,81],{"class":49},"      \"type\"",[36,83,53],{"class":42},[36,85,86],{"class":56},"\"paragraph\"",[36,88,60],{"class":42},[36,90,92,95,98,101,103,106,109,111,113,116],{"class":38,"line":91},6,[36,93,94],{"class":49},"      \"content\"",[36,96,97],{"class":42},": [{ ",[36,99,100],{"class":49},"\"type\"",[36,102,53],{"class":42},[36,104,105],{"class":56},"\"text\"",[36,107,108],{"class":42},", ",[36,110,105],{"class":49},[36,112,53],{"class":42},[36,114,115],{"class":56},"\"你好，QuireKit\"",[36,117,118],{"class":42}," }]\n",[36,120,122],{"class":38,"line":121},7,[36,123,124],{"class":42},"    }\n",[36,126,128],{"class":38,"line":127},8,[36,129,130],{"class":42},"  ]\n",[36,132,134],{"class":38,"line":133},9,[36,135,136],{"class":42},"}\n",[10,138,139,142,143,146,147,150,151,154,155,158],{},[14,140,141],{},"doc"," 是整份文档，",[14,144,145],{},"paragraph"," 是段落，",[14,148,149],{},"text"," 是文字。它们都是节点（Node）。粗体、斜体和链接这类附着在文字上的格式叫标记（Mark），保存在文字节点的 ",[14,152,153],{},"marks"," 中。标题级别等额外信息则放在节点的 ",[14,156,157],{},"attrs"," 中。",[10,160,161],{},"这种结构让同一份内容可以被命令修改、撤销、保存，也可以交给不同视图显示。文字在哪一页、选区画在哪个像素位置，属于后续排版和显示的结果。",[19,163,165],{"id":164},"schema-决定允许哪些内容","Schema 决定允许哪些内容",[10,167,168],{},"Schema 可以理解为这份文档的结构规则：能否出现标题？列表里允许什么内容？文字可以加哪些格式？Core 根据安装的 Node 和 Mark 扩展生成这些规则。",[10,170,171,172,177],{},"上一章安装的 StarterKit 已经包含段落、标题、列表和常见格式，因此不需要自己编写这些定义。新增一种内容，例如“提示组”，才需要新增 Node；",[173,174,176],"a",{"href":175},"\u002Fbuild\u002Fextension","内容扩展","会带你实现它。",[10,179,180],{},"恢复旧文档时也必须安装对应扩展。否则编辑器不知道未知节点的含义，不能把它当成普通段落悄悄丢掉。",[19,182,184],{"id":183},"先选择文章还是-word-文档","先选择文章还是 Word 文档",[186,187,188,204],"table",{},[189,190,191],"thead",{},[192,193,194,198,201],"tr",{},[195,196,197],"th",{},"你的产品需要什么",[195,199,200],{},"从哪种组合开始",[195,202,203],{},"需要了解的区别",[205,206,207,219],"tbody",{},[192,208,209,213,216],{},[210,211,212],"td",{},"笔记、文章、知识库",[210,214,215],{},"StarterKit 与通用文档模型",[210,217,218],{},"标题、段落和列表按内容顺序排列",[192,220,221,224,227],{},[210,222,223],{},"类似 Classic 的 Word 工作区",[210,225,226],{},"Word 扩展预设与 Word 文档模型",[210,228,229],{},"还要保存分节、页眉页脚、段落样式和编号等信息",[10,231,232,233,236],{},"Word 的“标题”可以是应用了标题样式的段落，不一定叫 ",[14,234,235],{},"heading","；一份 Word 文档也不只是普通段落外面套一个页面边框。仅更换 Canvas 或 SVG 视图，不会获得这些内容规则。",[10,238,239,240,243,244,247,248,251],{},"Word 预设提供相互配合的扩展和初始文档。完整示例的 ",[14,241,242],{},"assembly\u002Fword.ts"," 使用 ",[14,245,246],{},"createClassicWordPreset()"," 取得扩展，再用 ",[14,249,250],{},"createClassicWordDefaultDocument()"," 创建匹配的内容；这一步不会安装 Classic 的工具栏。该预设已经处理与 StarterKit 重叠的节点，不要再追加整套 StarterKit。",[19,253,254],{"id":254},"模型与排版怎样配合",[10,256,257],{},"文档模型说明“内容是什么”，文档排版配置（document profile）说明这些内容采用什么页面、段落和表格规则，View 根据排版结果显示内容并接收输入。",[10,259,260,261,265],{},"普通文章可以连续排版；Word 模型则由 Word 扩展提供分节和分页等规则。先复用预设即可。只有开发新的文档模型或布局能力时，才需要继续阅读 ",[173,262,264],{"href":263},"\u002Fapi\u002Fextensions","profile 与布局注册 API","。",[19,267,268],{"id":268},"读取和保存内容",[26,270,275],{"className":271,"code":272,"filename":273,"language":274,"meta":32,"style":32},"language-ts shiki shiki-themes github-light github-light github-dark","const document = editor.state.doc\nconst selection = editor.state.pm.selection\nconst backup = editor.getJSON()\n","读取编辑器内容","ts",[14,276,277,292,304],{"__ignoreMap":32},[36,278,279,283,286,289],{"class":38,"line":39},[36,280,282],{"class":281},"sDD9d","const",[36,284,285],{"class":49}," document",[36,287,288],{"class":281}," =",[36,290,291],{"class":42}," editor.state.doc\n",[36,293,294,296,299,301],{"class":38,"line":46},[36,295,282],{"class":281},[36,297,298],{"class":49}," selection",[36,300,288],{"class":281},[36,302,303],{"class":42}," editor.state.pm.selection\n",[36,305,306,308,311,313,316,320],{"class":38,"line":63},[36,307,282],{"class":281},[36,309,310],{"class":49}," backup",[36,312,288],{"class":281},[36,314,315],{"class":42}," editor.",[36,317,319],{"class":318},"sgQzM","getJSON",[36,321,322],{"class":42},"()\n",[10,324,325,328,329,332,333,336],{},[14,326,327],{},"state.doc"," 用于读取当前结构，",[14,330,331],{},"state.pm.selection"," 是当前选区；",[14,334,335],{},"getJSON()"," 把正文转换成适合存储的对象，通常在保存时调用。不要另建一份响应式正文，并在每次输入时双向替换它。",[10,338,339,340,343,344,347],{},"保存时还应记录自己的模型版本。完整示例用 ",[14,341,342],{},"generic-v1"," 和 ",[14,345,346],{},"word-v1"," 区分两种模型，恢复前检查版本和 Schema。后面切换 Canvas\u002FSVG 只改变显示方式，保存的数据仍属于原来的模型。",[10,349,350,351,355,356,360],{},"下一章：",[173,352,354],{"href":353},"\u002Fbuild\u002Fview","让文档显示为 Canvas\u002FSVG","。两种模型的完整装配文件都可以在",[173,357,359],{"href":358},"\u002Fbuild\u002Freference","工程参考","中查阅。",[362,363,364],"style",{},"html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}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 .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}",{"title":32,"searchDepth":46,"depth":46,"links":366},[367,368,369,370,371],{"id":21,"depth":46,"text":21},{"id":164,"depth":46,"text":165},{"id":183,"depth":46,"text":184},{"id":254,"depth":46,"text":254},{"id":268,"depth":46,"text":268},"认识节点、格式和 Schema，为文章或 Word 文档选择内容结构。","md",null,"zh-CN",{},true,"\u002Fbuild\u002Fmodel","构建产品",{"title":5,"description":372},"build\u002Fmodel.zh-CN","n7OSnKoS8kbfiD7agOCu9f_vJYQ0V2wjQf-HYnNSHV8",1793045207995]