[{"data":1,"prerenderedAt":190},["ShallowReactive",2],{"quirekit-doc:\u002Fconcepts\u002Fviews":3},{"id":4,"title":5,"body":6,"description":178,"extension":179,"keywords":180,"locale":181,"meta":182,"navigation":183,"order":184,"path":185,"section":186,"seo":187,"stem":188,"__hash__":189},"docs\u002Fconcepts\u002Fviews.zh-CN.md","视图与渲染",{"type":7,"value":8,"toc":171},"minimark",[9,13,17,106,121,140,143,150,153,160],[10,11,12],"p",{},"同一份文档可以由不同视图显示。Core 管理内容和命令，View 把内容显示出来，并把输入、点击和拖选转回文档操作。",[14,15,16],"h2",{"id":16},"从哪一种开始",[18,19,20,36],"table",{},[21,22,23],"thead",{},[24,25,26,30,33],"tr",{},[27,28,29],"th",{},"视图",[27,31,32],{},"适合的起点",[27,34,35],{},"接入方式",[37,38,39,58,74,90],"tbody",{},[24,40,41,45,48],{},[42,43,44],"td",{},"原生 DOM",[42,46,47],{},"先接入可编辑文字，复用浏览器输入和 DOM NodeView",[42,49,50,54,55],{},[51,52,53],"code",{},"DomViewExtension","，",[51,56,57],{},"mode: 'dom'",[24,59,60,63,66],{},[42,61,62],{},"Canvas",[42,64,65],{},"自绘文字、选区和分页工作区",[42,67,68,54,71],{},[51,69,70],{},"canvasViewExtension()",[51,72,73],{},"mode: 'canvas'",[24,75,76,79,82],{},[42,77,78],{},"SVG",[42,80,81],{},"根据相同排版结果显示矢量内容",[42,83,84,54,87],{},[51,85,86],{},"svgViewExtension()",[51,88,89],{},"mode: 'svg'",[24,91,92,95,98],{},[42,93,94],{},"retained HTML",[42,96,97],{},"使用 QuireKit 管理输入和选区的连续流显示",[42,99,100,54,103],{},[51,101,102],{},"htmlViewExtension()",[51,104,105],{},"mode: 'html'",[10,107,108,109,112,113,116,117,120],{},"原生 DOM 来自 ",[51,110,111],{},"@quirekit\u002Fdom-view","，retained HTML 来自 ",[51,114,115],{},"@quirekit\u002Fview-html","，Canvas 与 SVG 来自 ",[51,118,119],{},"@quirekit\u002Fview","。两种 HTML 形式有不同的输入和几何处理，不应混用它们的配置。",[10,122,123,124,129,130,134,135,139],{},"第一次接入可从",[125,126,128],"a",{"href":127},"\u002Fguide\u002Fquick-start","快速开始","使用 DOM；要自己做 Canvas\u002FSVG 工作区，继续",[125,131,133],{"href":132},"\u002Fbuild\u002Fview","挂载教程","。想直接使用带标尺和功能区的产品，可以接入 ",[125,136,138],{"href":137},"\u002Fclassic\u002Fquick-start","Classic","。",[14,141,142],{"id":142},"切换显示不会转换文档模型",[10,144,145,146,149],{},"创建时注册所需视图，再通过 ",[51,147,148],{},"changeMode()"," 切换主视图。内容、选区和历史仍由同一个 Core 实例管理。普通文章不会因为切换到 Canvas 就成为 Word 文档，Word 的结构与排版规则仍需安装对应扩展。",[14,151,152],{"id":152},"自定义内容需要对应的显示实现",[10,154,155,156,159],{},"段落和常见格式由现有能力支持。自定义 Node 除了结构，还要提供所选视图需要的呈现能力；",[51,157,158],{},"renderHTML()"," 并不能自动让 Canvas 知道怎样排列子内容。",[10,161,162,166,167,139],{},[125,163,165],{"href":164},"\u002Fbuild\u002Fextension","提示组教程","解释了这一步。各视图包的许可独立于 Core，见",[125,168,170],{"href":169},"\u002Fsupport","支持与许可",{"title":172,"searchDepth":173,"depth":173,"links":174},"",2,[175,176,177],{"id":16,"depth":173,"text":16},{"id":142,"depth":173,"text":142},{"id":152,"depth":173,"text":152},"理解内容和显示的关系，选择 DOM、HTML、Canvas 或 SVG 四种视图。","md",null,"zh-CN",{},true,4,"\u002Fconcepts\u002Fviews","核心概念",{"title":5,"description":178},"concepts\u002Fviews.zh-CN","nXFaTyymL95NoZSYEtcQI_Eid_2T8eRppODP0HSxs8M",1793045207996]