跳到正文
QuireKit
Core 开发文档
Alpha · API 持续演进

构建自己的编辑器

从第一个编辑器逐步加入文档模型、分页、工具栏、扩展和文件操作。

如果你想做类似 Classic 的产品,但希望自己设计工具栏和工作区,可以从 Core 开始。本教程带你逐步连接正文、视图和界面;不要求先读懂一整套工程。

你需要了解 Vue 3、TypeScript 和基本的 npm 包管理。第一次使用 QuireKit,请先完成建立第一个编辑器。

按你正在解决的问题阅读

你现在要做什么章节读完后能做什么
在页面里放入编辑器建立工程用一个 Vue 组件创建和销毁 Editor
确定正文保存什么文档模型理解节点、格式,选择文章或 Word 模型
显示 Canvas/SVG 正文挂载 View注册视图,理解显示尺寸和分页的区别
加上自己的工具栏连接命令和界面执行动作并更新按钮状态
增加新的正文结构内容扩展添加可输入、选择和保存的提示组
扩展现成 Classic 界面产品插件加入功能区动作、侧栏和文件服务
保存与打开文档文件操作保存 JSON,校验恢复内容,接入 DOCX
增加图片、字体和协作资源与产品能力找到各项能力的接入层

每章先说明要解决的问题,再解释相关代码。需要完整实现时,再打开工程参考按文件查阅。

最后会得到什么

下面是带有 Word 模型的完整工作区。你可以输入、选择文字、加粗、撤销,切换 Canvas/SVG,保存到浏览器或下载 JSON。它由 Core 和 View 组合,工具栏和文件流程由示例自己实现。

正在准备示例…

浏览器保存只对当前浏览器有效;打开其他文件前需要保存当前修改。图片资源、协作后端、审阅面板等能力需要另外接入,后面的章节会说明它们的位置。

自己开发还是复用 Classic

自己开发工作区时,你拥有界面、按钮状态和存储流程;Core 管理正文与命令,View 管理显示和输入。复用 Classic 时,产品已经提供工作区和功能区,你主要配置它并增加插件。

如果希望直接嵌入完整产品,转到 Classic 快速接入。如果希望自己搭建,继续建立第一个编辑器。

QuireKitQuireKit · Core、插件与 Classic 文档