【EMR 编辑器 · 图片与页面设置详解】
插图与环绕 · 占位图片 · 纸张边距 · 页眉页脚 · 水印 · 背景图
本篇讲「把纸面布置漂亮」的全部能力：图片怎么放、纸怎么设、页眉页脚水印背景怎么加。所有面板集中在工具栏「页面▾」里。
【一、插入图片】
两种方式：工具栏「图片」按钮选本地文件（转 dataURL 内嵌文档，随 JSON 一起保存、离线可看）；或代码插入任意 URL：
api.insertImage('/uploads/xray.png'); // 按原始尺寸，过宽自动缩到正文宽
api.insertImage(base64, 320, 240); // 指定宽高（逻辑像素）
外链 URL 图片注意：导出 PDF 与打印时编辑器会去 fetch 它，服务器需允许跨域（CORS）；内嵌 dataURL 无此问题；
图片复制：选中图片 Ctrl+C（可写系统剪贴板），Ctrl+V 粘贴副本。
【二、嵌入型与浮动环绕】
图片有两种存在方式，理解了这组概念，图文混排就通了：
嵌入型（默认）：图片是文档流的一部分，像一个大字符——连续插入的图片会并排一行，排不下自动换行。适合截图、示意图；
浮动型：图片钉在某页的固定位置，文字与它产生关系。三种环绕：四周环绕（square，文字避开图片绕着排）、衬于下方（behind，压在文字底下，做背景图章）、浮于上方（inFront，盖在文字上面，做骑缝章）；
切换方式：选中图片右键 → 浮动 / 嵌入切换与环绕方式；浮动图可直接拖拽改位置，选中拖手柄缩放（也可输入精确宽高）。
api.setSelectedImageWrap('square'); // 选中图 → 四周环绕
api.toggleSelectedImageFloat(); // 嵌入 ↔ 浮动互切
api.setImageFloat(3, { wrap: 'behind', pageIndex: 0, offsetX: 100, offsetY: 60 });
【三、占位图片：给未来的图留个座】
场景：模板设计时就知道「这里将来放胸片 / 签名」，但图片要等业务系统后传。占位图片就是「先占座、后上菜」：
定义：工具栏「占位图片」面板 → 新建（key 英文标识 + 中文 label + 默认宽高）；或 api.addPlaceholderImage({ key: 'lungXray', label: '胸片', width: 200, height: 120 })；
插入：光标定位后 api.insertPlaceholderImage('lungXray')——正文出现一个虚线占位框，框里显示「胸片」；
赋值：和普通数据一起，通过保留键 __images__ 传入——占位框立即显示真实图片（尺寸 / 浮动属性保留模板设定）；
api.setDataValues({
patient: { name: '张三' },
__images__: { lungXray: 'data:image/png;base64,...' },
});
【四、纸张与页边距】
纸张预设：A4 / A3 / A5 / B5 / 16K / Letter / Legal，或自定义毫米尺寸；纵向 / 横向一键切换；
页边距预设：常规 / 窄 / 宽，或自定义四边（mm）；
段落间距：紧凑 / 标准 / 宽松 / 自定义（px，0-100）——相邻段落间的默认附加间距，标题自动放大，0 = 挨在一起；
编程设置：api.setConfig({ page: { widthMm: 297, heightMm: 210, orientation 效果由宽高对调实现 } })——改页面几何会自动全量重排；也可以只改 theme（pageBg 纸外背景、paperBg 纸张底色、textColor、tableBorder）。
【五、页眉页脚】
进入编辑：直接双击页面顶部 / 底部区域，进入页眉（或页脚）编辑会话——它是一个小型的富文本区，支持段落、表格、图片（比如页眉放「医院名 + 科室」两列表格）；按 Esc 结束；
页码：在页眉 / 页脚里输入 {page} 和 {total} 占位符，渲染时自动替换为当前页码与总页数（如「第 {page} 页 / 共 {total} 页」）；
JSON 里：page.footer 是字符串版本；page.footerBlocks 是富文本版本（优先）。双击编辑的结果自动写入 footerBlocks；
打印与 PDF 导出包含页眉页脚。
【六、水印（文档内容水印）】
水印平铺在每页正文之下：文字水印（「草稿」「机密」）或图片水印（院徽）。注意与授权背景水印区分：这是文档内容的一部分，打印 / 导出可见、随 JSON 保存；授权背景水印只出现在屏幕上纸张外的空白区，不影响输出（license.bgWatermark: false 可关）。
api.setWatermark({
type: 'text', text: '草稿',
fontSize: 48, color: '#999', // 缺省 48px / #999
angle: -30, opacity: 0.15, // 倾斜角 / 不透明度
gapX: 240, gapY: 160 // 水平平铺间距 / 垂直
});
// 图片水印：{ type: 'image', src, width?, height?, angle?, opacity? }
api.setWatermark(null); // 关闭水印
【七、页面背景图】
整页铺一张底图（带抬头的制式文书：扫描一张空白天头纸做背景，正文打在上面）。层级关系固定：纸张 < 背景图 < 水印 < 正文，互不遮挡。四种适配：cover 等比裁切铺满 / contain 等比完整显示 / fill 拉伸铺满 / repeat 平铺。
api.setBackgroundImage({ src: '/img/letterhead.png', fit: 'cover', opacity: 1 });
api.setBackgroundImage(null); // 清除背景图
提示：背景图与水印都会进入打印与 PDF 导出。若导出 PDF 时用了外链背景图，确保可跨域访问。