如果你想做类似 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 快速接入。如果希望自己搭建,继续建立第一个编辑器。