工作区已经能输入了。现在加一个“加粗”按钮:选中文字,点击按钮,让 Core 修改这段内容,再让按钮显示当前是否加粗。
界面不需要自己修改正文 JSON。按钮、快捷键和应用代码都调用同一个 Editor 的命令。
1. 执行一个动作
editor.chain().focus().toggleBold().run()
focus() 把输入焦点交回编辑器,toggleBold() 修改当前选区,run() 提交命令链。使用当前选区即可,不必先移动到文档末尾。
直接执行单个动作可以调用 editor.commands.toggleBold()。当你要把焦点、插入、格式等几个动作组合起来时,使用 chain() 更方便。
2. 区分选中和禁用
按钮需要回答两个不同的问题:当前文字是不是粗体?现在可不可以执行加粗?
const active = editor.isActive('bold')
const enabled = editor.isEditable && editor.can().toggleBold()
isActive() 查询格式,can() 检查能否执行但不修改内容。只读切换还应调用 editor.setEditable(false),让视图停止接受用户编辑输入;只禁用按钮不能禁止键盘输入。程序命令的写权限仍由应用检查,见命令与事务。
Word 格式还可能继承段落样式,所以它的状态查询不同。完整示例的 assembly/word.ts 使用 readEffectiveDirectEmphasisState() 读取实际加粗状态,而普通模型使用 isActive('bold')。按钮的显示逻辑应与安装的格式扩展配套。
3. 内容改变后更新按钮
保存一个 Editor 实例,只把按钮需要的布尔值交给 Vue。订阅 transaction 后重新读取这些状态,在组件退出时移除同一个监听函数。
editor.on('transaction', refreshToolbar)
// 组件退出时:
editor.off('transaction', refreshToolbar)
refreshToolbar 是你自己的状态更新函数。通常读取加粗、撤销、重做等少量状态就够了,不必在每次光标移动时调用 getJSON() 复制全文。保存中的提示、文件错误和页数也分别由保存流程与 View 更新。
在完整工程里找哪里
workspace.vue 放按钮和点击处理;session.ts 计算并发布按钮状态;assembly/ 提供与文档模型匹配的格式查询。可以在工程参考中逐个查看。
命令返回的布尔值表示是否处理了该动作,不表示文件已经保存。下一章用同样的命令机制插入自己的内容,具体方法见 Editor API。