Skip to content

工具栏分组 ​

工具栏的页签就是 ToolName 的成员,而每个分组只在两件事同时成立时出现:你在 tools 里点名它, 并且它背后的扩展真的注册了 —— 所以没装水印扩展的应用不会看到一个空的「水印」页签。 唯一的例外是模板:它背后不是 Tiptap 扩展,而是 editor/template.ts 的模板管线,所以只有 tools 一道闸门。

分组tools 名字依赖的扩展内容
模板template—(模板管线)拉取模板列表、选中载入、新建模板;填写模式下换成「加载本地模板」
格式fonttextStyle字体、字号、加粗 / 斜体 / 下划线 / 删除线、字体颜色、字体背景色
段落paragraphparagraphStyle样式(正文 / H1–H6)、对齐、行距、首行缩进 N 字符、段前 / 段后
插入insertvariable / qrcode / page / image 任一插入变量、插入二维码、新页面、分页、插入图片
表格tabletable插入表格(8×8 网格)、插入布局表、合并 / 取消合并、加删行列
页面pagepage纸张、方向、页边距、页眉页脚开关、页眉页脚高度、页码位置 + 格式、Logo 上传 + 位置
变量variablevariable文档里的变量列表,编辑 / 移除
二维码qrcodeqrcode二维码内容、尺寸、所在页面、位置、颜色、边距
水印watermarkwatermark文字 / 图片、角度、透明度、灰度、平铺
打印printprint纸张 / 方向 / 页边距覆盖、@page margin box、文档标题

几点值得单独说明:

  • 默认集合是七个页签,两头固定。 DEFAULT_TOOLS 的第一项是 template(加载模板是编辑之前 的事),最后一项是 watermark(水印是成品合同的一部分,放在最后是因为它是作者最后才会去动的 东西)。variable、qrcode、print 仍然需要点名 —— 它们各自都有对应的扩展闸门,只有模板没 有(它背后是模板管线,不是扩展)。
  • 插入与表格是两个页签。 它们曾经是同一个:表格工具住在「插入」里,于是那个页签同时表达 「往里放一个新东西」和「改你正踩着的这张表」。拆开之后,光标在表格里时一步就能点到表格操作, 「插入」只描述插入。table 不再是 insert 的别名,DEFAULT_TOOLS 里两者都在。
  • 「分页」只在「插入」里。 「页面」页签里也曾经有一个「插入分页符」,于是同一个动作有两个入口, 而且那个按钮在纵向排列里被拉到整行宽,看起来就是坏的。现在只保留「插入」里的那个 —— 它所属的 页签正是在回答「往文档里放一个新东西」。
  • 字体颜色和背景色的图标是大写「A」。 Word 的样子:A 下面一条色条(字体颜色),A 坐在一块 色块上(字体背景色),选中的颜色会立刻反映到色条/色块上。
    • 控件是一棵真实的元素树:<span class="s-tool-font__color"><span class="…__swatch"> 里面是 <span class="…__glyph">A</span> 与一条 <span class="…__bar" data-color="#000000"> (背景色变体里色块在 A 后面)。色条的颜色来自模型值,没选颜色时字体颜色是黑 #000000、 字体背景色是白 #ffffff。
    • el-color-picker 没有触发器插槽,它总会渲染自己的色块、箭头,以及未选颜色时那个 empty 标记(一个 is-icon-close 的关闭图标)。所以这里不去改它的子元素,而是把它作为一层 透明覆盖层放在可视层上面(opacity: 0; position: absolute; inset: 0):点击、键盘焦点与 颜色面板都归它,用户看到的一切都是本组件的元素。这样也不再有「Element Plus 的某个内部结构一 变,图标就漏出来」这种事。
  • 字体颜色和背景色是同一个 textStyle mark 的属性,和字体、字号一样作用于选区。它们本来就 已经注册(TextStyleKit 默认包含 Color 与 BackgroundColor,只有显式传 false 才关掉), 以前缺的只是控件。颜色面板里的「清空」写的是 null,于是走 unsetColor —— 而不是往文档里写一条 color: ; 空声明。
  • 首行缩进按字符数设置。 一个汉字正好是一个 em,所以输入 2 写进文档的就是 text-indent: 2em (也就是旧版按钮写死的那个值)。旁边两个箭头按钮是 ±1 字符的快捷方式。
  • 「插入变量」自己不弹对话框。 它把事件交给 SEditor,因为变量节点自己的点击回调也要打开同一个 对话框;两个所有者正是旧版对话框被共享、并把上一个变量的状态带进下一个的原因。
  • 「插入二维码」的内容取文档的第一个标题(没有标题时用一个默认链接),所以一次点击插入的是有内容 的二维码而不是空载荷;插进去之后马上弹出二维码的选项,也可以随时点页面上的二维码重新打开它 (和变量一样)。位图是异步生成的,不会插两次。
  • 模板是第一个页签,排在「格式」前面。 加载一份模板是作者在动任何格式之前要做的事,排在 「格式」后面等于先改格式再发现模板选错了。DEFAULT_TOOLS 里也有它。它有两种样子:
    • 设计模式:拉取远程模板列表、选中后载入、或者「新建模板」(从编辑器自己的空白文档开始)。
    • 填写模式:配置了 template(kind: "remote",也就是直接指向一份模板而不是列表)时 整个功能区都不显示 —— 模板已经定了,再给一个选择就是骗人;没有配置时只显示「模板」这一个 页签,里面的按钮把本机保存的模板载回来。

基于 MIT 许可发布