[{"data":1,"prerenderedAt":217},["ShallowReactive",2],{"quirekit-doc:\u002Fbuild":3},{"id":4,"title":5,"body":6,"description":205,"extension":206,"keywords":207,"locale":208,"meta":209,"navigation":210,"order":211,"path":212,"section":213,"seo":214,"stem":215,"__hash__":216},"docs\u002Fbuild.zh-CN.md","构建自己的编辑器",{"type":7,"value":8,"toc":198},"minimark",[9,13,22,26,160,168,171,174,178,181,185,188],[10,11,12],"p",{},"如果你想做类似 Classic 的产品，但希望自己设计工具栏和工作区，可以从 Core 开始。本教程带你逐步连接正文、视图和界面；不要求先读懂一整套工程。",[10,14,15,16,21],{},"你需要了解 Vue 3、TypeScript 和基本的 npm 包管理。第一次使用 QuireKit，请先完成",[17,18,20],"a",{"href":19},"\u002Fbuild\u002Fproject","建立第一个编辑器","。",[23,24,25],"h2",{"id":25},"按你正在解决的问题阅读",[27,28,29,45],"table",{},[30,31,32],"thead",{},[33,34,35,39,42],"tr",{},[36,37,38],"th",{},"你现在要做什么",[36,40,41],{},"章节",[36,43,44],{},"读完后能做什么",[46,47,48,62,76,90,104,118,132,146],"tbody",{},[33,49,50,54,59],{},[51,52,53],"td",{},"在页面里放入编辑器",[51,55,56],{},[17,57,58],{"href":19},"建立工程",[51,60,61],{},"用一个 Vue 组件创建和销毁 Editor",[33,63,64,67,73],{},[51,65,66],{},"确定正文保存什么",[51,68,69],{},[17,70,72],{"href":71},"\u002Fbuild\u002Fmodel","文档模型",[51,74,75],{},"理解节点、格式，选择文章或 Word 模型",[33,77,78,81,87],{},[51,79,80],{},"显示 Canvas\u002FSVG 正文",[51,82,83],{},[17,84,86],{"href":85},"\u002Fbuild\u002Fview","挂载 View",[51,88,89],{},"注册视图，理解显示尺寸和分页的区别",[33,91,92,95,101],{},[51,93,94],{},"加上自己的工具栏",[51,96,97],{},[17,98,100],{"href":99},"\u002Fbuild\u002Fcommands","连接命令和界面",[51,102,103],{},"执行动作并更新按钮状态",[33,105,106,109,115],{},[51,107,108],{},"增加新的正文结构",[51,110,111],{},[17,112,114],{"href":113},"\u002Fbuild\u002Fextension","内容扩展",[51,116,117],{},"添加可输入、选择和保存的提示组",[33,119,120,123,129],{},[51,121,122],{},"扩展现成 Classic 界面",[51,124,125],{},[17,126,128],{"href":127},"\u002Fbuild\u002Fproduct-plugin","产品插件",[51,130,131],{},"加入功能区动作、侧栏和文件服务",[33,133,134,137,143],{},[51,135,136],{},"保存与打开文档",[51,138,139],{},[17,140,142],{"href":141},"\u002Fbuild\u002Ffiles","文件操作",[51,144,145],{},"保存 JSON，校验恢复内容，接入 DOCX",[33,147,148,151,157],{},[51,149,150],{},"增加图片、字体和协作",[51,152,153],{},[17,154,156],{"href":155},"\u002Fbuild\u002Fresources","资源与产品能力",[51,158,159],{},"找到各项能力的接入层",[10,161,162,163,167],{},"每章先说明要解决的问题，再解释相关代码。需要完整实现时，再打开",[17,164,166],{"href":165},"\u002Fbuild\u002Freference","工程参考","按文件查阅。",[23,169,170],{"id":170},"最后会得到什么",[10,172,173],{},"下面是带有 Word 模型的完整工作区。你可以输入、选择文字、加粗、撤销，切换 Canvas\u002FSVG，保存到浏览器或下载 JSON。它由 Core 和 View 组合，工具栏和文件流程由示例自己实现。",[175,176],"docs-demo",{"name":177},"product\u002Fword",[10,179,180],{},"浏览器保存只对当前浏览器有效；打开其他文件前需要保存当前修改。图片资源、协作后端、审阅面板等能力需要另外接入，后面的章节会说明它们的位置。",[23,182,184],{"id":183},"自己开发还是复用-classic","自己开发还是复用 Classic",[10,186,187],{},"自己开发工作区时，你拥有界面、按钮状态和存储流程；Core 管理正文与命令，View 管理显示和输入。复用 Classic 时，产品已经提供工作区和功能区，你主要配置它并增加插件。",[10,189,190,191,195,196,21],{},"如果希望直接嵌入完整产品，转到 ",[17,192,194],{"href":193},"\u002Fclassic\u002Fquick-start","Classic 快速接入","。如果希望自己搭建，继续",[17,197,20],{"href":19},{"title":199,"searchDepth":200,"depth":200,"links":201},"",2,[202,203,204],{"id":25,"depth":200,"text":25},{"id":170,"depth":200,"text":170},{"id":183,"depth":200,"text":184},"从第一个编辑器逐步加入文档模型、分页、工具栏、扩展和文件操作。","md",null,"zh-CN",{},true,0,"\u002Fbuild","构建产品",{"title":5,"description":205},"build.zh-CN","3JFFruAwXocg-U1-MmA5l6mKMhYooCz8Q4-sf7tPcBs",1793045207995]