[{"data":1,"prerenderedAt":311},["ShallowReactive",2],{"quirekit-doc:\u002Fbuild\u002Fcommands":3},{"id":4,"title":5,"body":6,"description":299,"extension":300,"keywords":301,"locale":302,"meta":303,"navigation":304,"order":305,"path":306,"section":307,"seo":308,"stem":309,"__hash__":310},"docs\u002Fbuild\u002Fcommands.zh-CN.md","连接工具栏与编辑器",{"type":7,"value":8,"toc":293},"minimark",[9,13,16,21,64,78,89,93,96,158,178,193,197,204,245,255,258,277,289],[10,11,12],"p",{},"工作区已经能输入了。现在加一个“加粗”按钮：选中文字，点击按钮，让 Core 修改这段内容，再让按钮显示当前是否加粗。",[10,14,15],{},"界面不需要自己修改正文 JSON。按钮、快捷键和应用代码都调用同一个 Editor 的命令。",[17,18,20],"h2",{"id":19},"_1-执行一个动作","1. 执行一个动作",[22,23,29],"pre",{"className":24,"code":25,"filename":26,"language":27,"meta":28,"style":28},"language-ts shiki shiki-themes github-light github-light github-dark","editor.chain().focus().toggleBold().run()\n","加粗按钮的点击处理","ts","",[30,31,32],"code",{"__ignoreMap":28},[33,34,37,41,45,48,51,53,56,58,61],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sVPnS","editor.",[33,42,44],{"class":43},"sgQzM","chain",[33,46,47],{"class":39},"().",[33,49,50],{"class":43},"focus",[33,52,47],{"class":39},[33,54,55],{"class":43},"toggleBold",[33,57,47],{"class":39},[33,59,60],{"class":43},"run",[33,62,63],{"class":39},"()\n",[10,65,66,69,70,73,74,77],{},[30,67,68],{},"focus()"," 把输入焦点交回编辑器，",[30,71,72],{},"toggleBold()"," 修改当前选区，",[30,75,76],{},"run()"," 提交命令链。使用当前选区即可，不必先移动到文档末尾。",[10,79,80,81,84,85,88],{},"直接执行单个动作可以调用 ",[30,82,83],{},"editor.commands.toggleBold()","。当你要把焦点、插入、格式等几个动作组合起来时，使用 ",[30,86,87],{},"chain()"," 更方便。",[17,90,92],{"id":91},"_2-区分选中和禁用","2. 区分选中和禁用",[10,94,95],{},"按钮需要回答两个不同的问题：当前文字是不是粗体？现在可不可以执行加粗？",[22,97,100],{"className":24,"code":98,"filename":99,"language":27,"meta":28,"style":28},"const active = editor.isActive('bold')\nconst enabled = editor.isEditable && editor.can().toggleBold()\n","普通 Bold 扩展的按钮状态",[30,101,102,131],{"__ignoreMap":28},[33,103,104,108,112,115,118,121,124,128],{"class":35,"line":36},[33,105,107],{"class":106},"sDD9d","const",[33,109,111],{"class":110},"sUNQB"," active",[33,113,114],{"class":106}," =",[33,116,117],{"class":39}," editor.",[33,119,120],{"class":43},"isActive",[33,122,123],{"class":39},"(",[33,125,127],{"class":126},"s-HEn","'bold'",[33,129,130],{"class":39},")\n",[33,132,134,136,139,141,144,147,149,152,154,156],{"class":35,"line":133},2,[33,135,107],{"class":106},[33,137,138],{"class":110}," enabled",[33,140,114],{"class":106},[33,142,143],{"class":39}," editor.isEditable ",[33,145,146],{"class":106},"&&",[33,148,117],{"class":39},[33,150,151],{"class":43},"can",[33,153,47],{"class":39},[33,155,55],{"class":43},[33,157,63],{"class":39},[10,159,160,163,164,167,168,171,172,177],{},[30,161,162],{},"isActive()"," 查询格式，",[30,165,166],{},"can()"," 检查能否执行但不修改内容。只读切换还应调用 ",[30,169,170],{},"editor.setEditable(false)","，让视图停止接受用户编辑输入；只禁用按钮不能禁止键盘输入。程序命令的写权限仍由应用检查，见",[173,174,176],"a",{"href":175},"\u002Fconcepts\u002Fcommands","命令与事务","。",[10,179,180,181,184,185,188,189,192],{},"Word 格式还可能继承段落样式，所以它的状态查询不同。完整示例的 ",[30,182,183],{},"assembly\u002Fword.ts"," 使用 ",[30,186,187],{},"readEffectiveDirectEmphasisState()"," 读取实际加粗状态，而普通模型使用 ",[30,190,191],{},"isActive('bold')","。按钮的显示逻辑应与安装的格式扩展配套。",[17,194,196],{"id":195},"_3-内容改变后更新按钮","3. 内容改变后更新按钮",[10,198,199,200,203],{},"保存一个 Editor 实例，只把按钮需要的布尔值交给 Vue。订阅 ",[30,201,202],{},"transaction"," 后重新读取这些状态，在组件退出时移除同一个监听函数。",[22,205,208],{"className":24,"code":206,"filename":207,"language":27,"meta":28,"style":28},"editor.on('transaction', refreshToolbar)\n\u002F\u002F 组件退出时：\neditor.off('transaction', refreshToolbar)\n","订阅与释放",[30,209,210,225,231],{"__ignoreMap":28},[33,211,212,214,217,219,222],{"class":35,"line":36},[33,213,40],{"class":39},[33,215,216],{"class":43},"on",[33,218,123],{"class":39},[33,220,221],{"class":126},"'transaction'",[33,223,224],{"class":39},", refreshToolbar)\n",[33,226,227],{"class":35,"line":133},[33,228,230],{"class":229},"sqmzS","\u002F\u002F 组件退出时：\n",[33,232,234,236,239,241,243],{"class":35,"line":233},3,[33,235,40],{"class":39},[33,237,238],{"class":43},"off",[33,240,123],{"class":39},[33,242,221],{"class":126},[33,244,224],{"class":39},[10,246,247,250,251,254],{},[30,248,249],{},"refreshToolbar"," 是你自己的状态更新函数。通常读取加粗、撤销、重做等少量状态就够了，不必在每次光标移动时调用 ",[30,252,253],{},"getJSON()"," 复制全文。保存中的提示、文件错误和页数也分别由保存流程与 View 更新。",[17,256,257],{"id":257},"在完整工程里找哪里",[10,259,260,263,264,267,268,271,272,276],{},[30,261,262],{},"workspace.vue"," 放按钮和点击处理；",[30,265,266],{},"session.ts"," 计算并发布按钮状态；",[30,269,270],{},"assembly\u002F"," 提供与文档模型匹配的格式查询。可以在",[173,273,275],{"href":274},"\u002Fbuild\u002Freference","工程参考","中逐个查看。",[10,278,279,280,284,285,177],{},"命令返回的布尔值表示是否处理了该动作，不表示文件已经保存。下一章用同样的命令机制",[173,281,283],{"href":282},"\u002Fbuild\u002Fextension","插入自己的内容","，具体方法见 ",[173,286,288],{"href":287},"\u002Fapi\u002Feditor","Editor API",[290,291,292],"style",{},"html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sqmzS, html code.shiki .sqmzS{--shiki-default:#6A737D;--shiki-light:#6A737D;--shiki-dark:#6A737D}",{"title":28,"searchDepth":133,"depth":133,"links":294},[295,296,297,298],{"id":19,"depth":133,"text":20},{"id":91,"depth":133,"text":92},{"id":195,"depth":133,"text":196},{"id":257,"depth":133,"text":257},"从加粗按钮开始，理解命令、可用状态和界面更新。","md",null,"zh-CN",{},true,4,"\u002Fbuild\u002Fcommands","构建产品",{"title":5,"description":299},"build\u002Fcommands.zh-CN","UCjjam5Hy-iJxjsXQkE9kPN8V-md3UpIZVk68zPHX9o",1793045209085]