【EMR 编辑器 · 文本与表格详解】
打字与排版 · 行内样式 · 段落与列表 · 内容保护 · 表格从入门到跨页表头
本篇讲「日常打字」会用到的全部能力。每个功能按「在界面上怎么操作 → 用代码怎么调」两条线讲,界面对应内置工具栏(toolbar 开启时)。
【一、输入:中文输入法与基本编辑】
打开编辑器直接打字即可。中文输入法(搜狗、微软拼音等)完全支持:输入拼音时显示合成框,选词后上屏——底层用隐藏 textarea + composition 事件实现,不会出现「打一个字跳一下」的常见 Canvas 输入问题。
Enter 回车分段;单元格内回车是段内换段(不会跳出表格);
Backspace / Delete 删字;图片选中状态下按删除键删图片;
方向键移动光标(Shift 按住扩选),可跨段落、跨表格单元格移动;Home / End 跳行首行尾;
Ctrl+Z 撤销 / Ctrl+Y(或 Ctrl+Shift+Z)重做,历史上限 100 步;Ctrl+A 全选;
编辑器不会抢占页面其他输入框(INPUT / TEXTAREA 聚焦时)的快捷键与剪贴板,混排页面放心用。
【二、行内样式:让文字变粗变斜】
选中文字后点工具栏按钮(或快捷键):B 粗体(Ctrl+B)、I 斜体(Ctrl+I)、U 下划线(Ctrl+U)、X² 上标、X₂ 下标。没有选中时点按钮,设置的是后续输入的样式——和 Word 一样:不选文字直接点 B,之后打的字都是粗体。
字体 / 字号 / 颜色同理作用于选区。有个概念要知道:字号是「倍数」而不是绝对值——工具栏字号下拉显示的 pt 值 = sizeScale × 文档默认字号(默认字号在 config.defaultFontSize,改它能全局缩放整篇文档)。无选区设置字体时,后续输入优先用你显式设置的样式,否则自动继承光标前一个字符的样式(Word 行为)。
// 代码方式(api = 命令式句柄,三端一致)
api.toggleStyle('bold'); // 切换选中文字粗体
api.setStyle({ color: '#c00', sizeScale: 1.5 }); // 选区变红放大
api.setStyle({ fontFamily: 'KaiTi' }); // 换楷体(值需在字体下拉配置)
api.setStyle({ sizeScale: null }); // null = 清除,恢复默认字号
api.insertText('插入的文字', { bold: true }); // 带样式插入
const s = api.getSelectionStyle(); // 查询光标处样式(联动自建按钮)
【三、段落:对齐、行距、缩进、列表】
水平对齐:工具栏「左 / 中 / 右」按钮(或 api.setBlockAlignment('center'));
行距:工具栏行距下拉(0.5–3+ 倍,api.setLineHeight(1.5);null 恢复默认);
有序 / 无序列表:工具栏按钮;Enter 自动续项,Tab 降一级、Shift+Tab 升一级;
段前段后间距:全局默认值在「页面▾ → 段落间距」设置(紧凑 / 标准 / 宽松 / 自定义 0-100px);单段覆盖用 JSON 的 spacingBefore / spacingAfter 字段。
【四、内容保护:锁住不许改的文字】
选中一段文字 → 工具栏「保护选区」,这段文字就变成只读(黄色底标):不能删、不能改、不能在中间插入。适合固定格式部分(法律条款、医院抬头、签名区)。右键菜单或工具栏可「取消保护」。
api.protectSelection(); // 保护当前选区(须先选中)
api.unprotectSelection(); // 取消保护
【五、复制粘贴:结构往返】
编辑器内部复制粘贴走 HTML 通道:段落、表格、列表、数据域标记全部保留——从文档 A 复制一张表到文档 B,粘贴回来还是一张表(且数据绑定关系不丢)。图片支持 Ctrl+C / Ctrl+V(含写系统剪贴板,可跨标签页粘贴)。从外部(网页、Word)粘贴纯文本会自动清理格式为普通段落。
【六、表格:插入与结构编辑】
插入:工具栏「表格▾」按钮悬停出现 8×8 网格,鼠标滑过选行列(首行自动设为表头);或代码插入任意尺寸:
api.insertTable(5, 4, 1); // 5 行 4 列,前 1 行为表头
api.insertTable(); // 缺省 3x3 无表头
表格的绝大部分操作在右键菜单里(光标放进表格后右键):
行列操作:上方 / 下方插行、删行;左侧 / 右侧插列、删列(删到只剩一行一列 = 删除整个表格,注意);
合并 / 拆分:拖选多个单元格后「合并单元格」;光标放进合并格可「拆分单元格」;
单元格内:Enter 换段(一格可多段)、Tab 跳下一格(Shift+Tab 回退)、方向键跨格;
对齐:水平(左 / 中 / 右)+ 垂直(上 / 中 / 下),拖选多格批量应用。
// 对应代码(光标须在目标表格内)
api.insertTableRow(true); // 上方插一行
api.deleteTableColumn(); // 删光标所在列
api.mergeCells(); // 合并选区覆盖的格子
api.splitCell(); // 拆分光标所在合并格
api.setCellAlign('center', 'middle'); // 水平居中+垂直居中
【七、表格:边框、列宽与行高】
隐藏边框:右键「隐藏全部边框」——做「无形表格排版」(用表格对齐但不要线)时特别有用;
边框线宽:右键设置(api.setTableBorderWidth(2));单元格内边距:api.setTablePadding(8);
固定列宽:api.setTableColWidths([120, 80, ...])——配置后列宽固定,内容多只换行不撑宽;缺省按首行 widthRatio 自动分配;
最低行高:api.setTableRowHeight(40)——实际行高 = max(最低行高, 内容高度),做空表格表单(格子先撑开等人填)常用;
【八、表格:表头与跨页(重点)】
这是医疗文书表格最关心的能力,三个规则记住就够了:
表头行数:右键「表头行数」可设 0-N 行(支持两三行的复合表头);表头区在跨页拆分时整体不拆——不会出现表头被劈成两半;
跨页重复表头:开启后(默认开启),表格在第 2、3…页的顶部自动重画表头行;api.setTableHeader(2, true) = 2 行表头 + 跨页重复;
按行拆分 + 合并格安全:长表格超页时整行搬到下一页(不会把一行劈两半);跨行合并的格子不会被切断;续页片段的边框自动封口,不会出现半截开口的表格。
const h = api.getTableHeader(); // 查询:{ headerRows: 1, repeatHeader: true }
【九、横线与分页符】
横线:工具栏「横线▾」可设宽度比例、粗细、中间文字(如「以下为附件」分隔);api.insertDivider(0.8, { content: '附件' }, 1.5);插入后光标放在横线上可用 set/getDividerWidth 系列调整;
分页符:工具栏按钮或 api.insertPageBreak()——强制从当前位置开新页(比如「签名页另起一页」)。