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

连接工具栏与编辑器

从加粗按钮开始,理解命令、可用状态和界面更新。

工作区已经能输入了。现在加一个“加粗”按钮:选中文字,点击按钮,让 Core 修改这段内容,再让按钮显示当前是否加粗。

界面不需要自己修改正文 JSON。按钮、快捷键和应用代码都调用同一个 Editor 的命令。

1. 执行一个动作

加粗按钮的点击处理ts

focus() 把输入焦点交回编辑器,toggleBold() 修改当前选区,run() 提交命令链。使用当前选区即可,不必先移动到文档末尾。

直接执行单个动作可以调用 editor.commands.toggleBold()。当你要把焦点、插入、格式等几个动作组合起来时,使用 chain() 更方便。

2. 区分选中和禁用

按钮需要回答两个不同的问题:当前文字是不是粗体?现在可不可以执行加粗?

普通 Bold 扩展的按钮状态ts

isActive() 查询格式,can() 检查能否执行但不修改内容。只读切换还应调用 editor.setEditable(false),让视图停止接受用户编辑输入;只禁用按钮不能禁止键盘输入。程序命令的写权限仍由应用检查,见命令与事务。

Word 格式还可能继承段落样式,所以它的状态查询不同。完整示例的 assembly/word.ts 使用 readEffectiveDirectEmphasisState() 读取实际加粗状态,而普通模型使用 isActive('bold')。按钮的显示逻辑应与安装的格式扩展配套。

3. 内容改变后更新按钮

保存一个 Editor 实例,只把按钮需要的布尔值交给 Vue。订阅 transaction 后重新读取这些状态,在组件退出时移除同一个监听函数。

订阅与释放ts

refreshToolbar 是你自己的状态更新函数。通常读取加粗、撤销、重做等少量状态就够了,不必在每次光标移动时调用 getJSON() 复制全文。保存中的提示、文件错误和页数也分别由保存流程与 View 更新。

在完整工程里找哪里

workspace.vue 放按钮和点击处理;session.ts 计算并发布按钮状态;assembly/ 提供与文档模型匹配的格式查询。可以在工程参考中逐个查看。

命令返回的布尔值表示是否处理了该动作,不表示文件已经保存。下一章用同样的命令机制插入自己的内容,具体方法见 Editor API。

QuireKitQuireKit · Core、插件与 Classic 文档