EMR 编辑器 · 快速上手指南 - 帮助文档

【EMR 编辑器 · 快速上手指南】

认识这款编辑器 · 选对接入方式 · 跑起第一个示例 · 本文由编辑器自身渲染

本篇面向第一次接触 EMR 编辑器的开发人员，帮你回答三个问题：它是什么、能做什么、怎么跑起来。读完后再按你使用的技术栈进入对应《集成详解》篇目。你正在看的这页文档，就是编辑器渲染出来的——所见即所得的效果就在眼前。

【一、这是一款什么样的编辑器】

一句话：一款用 Canvas 画出来的「类 Word」前端编辑器控件，专为格式化文书场景设计。它不是网页里那种随手打字的输入框，而是把整张 A4 纸搬到浏览器里：真实的纸张尺寸、页边距、页眉页脚、页码，打印出来和屏幕上看到的一模一样。

它和常见富文本编辑器（如 Quill、TinyMCE）的核心区别：那些编辑器用 HTML + contenteditable 排版，长表格分页、页眉页脚、精确行位置都很难做；本编辑器自己排版、自己绘制，每个字的位置都由布局引擎精确计算，所以能做到「分页到行、打印所见即所得、文字可搜索的矢量 PDF」。900 页大文档渲染实测约 800ms（i7-8700 ）。

它擅长解决这类痛点：

· 医院电子病历：入院记录、手术记录等制式文书，模板固定 + 患者数据回填；

· 教务 / 政府：制式文档、公文、审批单据，格式要求严格、必须分页打印；

· 业务系统：复杂分页报告、档案卷宗、批量打印通知书、证书模板；

· 任何「要打印 / 导出 PDF / 精确排版」的富文本场景。

【二、核心能力一览】

分类

能力

解决什么问题

排版渲染

Canvas 自绘、A4/A3/A5/B5/16K/Letter/Legal 纸张、页边距、页眉页脚、页码、缩放、虚拟滚动

屏幕 = 纸张，打印不跑版；几百页文档也流畅

文本编辑

中文输入法、粗斜下划上下标、字体字号颜色、行距对齐、列表、撤销重做、剪贴板往返

像 Word 一样顺手，普通用户零学习成本

表格

行列增删、合并拆分、水平垂直对齐、边框线宽边距、多行表头、跨页拆分 + 跨页重复表头

长表格跨页不乱、续页自动带表头

图片

嵌入型并排、浮动环绕（四周 / 衬底 / 浮上）、拖拽缩放、复制粘贴

图文混排像 Word，签名章 / 检查图随意放

结构化数据

数据源占位符、录入域（正文直接填空）、表格行 / 段落组循环展开、占位图片

模板与数据彻底分离，一份模板套千百个对象数据

质控

操作留痕（不可篡改审计日志）、痕迹预览、关键词检查（红标 + 提示词）

满足电子病历合规要求，谁改的、改了什么都可查

输出

矢量 PDF（文字可搜索）、系统打印 / 静默打印、区域打印、续打标记、图片 / 长图导出

归档、打印、分段续打一次搞定

安全

内容保护（只读片段）、Ed25519 签名授权 key、离线激活

关键内容防误删；授权无需联网激活服务器

提示：每一类能力的操作细节与代码示例，都在对应的专题文档里（见本篇末尾的阅读地图），本篇不展开。

【三、选择接入方式】

编辑器以「一个内核 + 多种封装」的形式交付，无论哪种方式，命令式 API 完全一致——学会一套 API，三个平台通用。按下表对号入座：

你的工程

推荐方式

说明

React 工程（Vite / webpack / Next.js）

@emr/core + @emr/editor

标准 React 组件，详见《React 集成详解》

Vue 3 工程

再加 @emr/vue

props / 事件 / API 与 React 版一致，详见《Vue 3 集成详解》

传统页面 / 无构建工程

emr-editor.iife.js

环境要求：浏览器 Chrome / Edge / Firefox ≥ 90（不支持 IE）；npm 方式需 Node.js ≥ 18 与 ESM 打包器（Vite / webpack 5 等，产物不能在 Node 里直接 import）；React ≥ 18。IIFE 包零依赖（React 已打进包内）。PDF 导出需自备中文字体文件（详见《PDF 导出详解》）。

【四、安装】

从本站下载中心拿到 tgz 压缩包后，在工程目录执行（也可以用 pnpm / yarn，命令等价）：

# React 工程：内核 + 组件必须一起安装

npm install ./emr-core-x.y.z.tgz ./emr-editor-x.y.z.tgz

# Vue 3 工程：追加 @emr/vue 与 react react-dom

npm install ./emr-core-x.y.z.tgz ./emr-editor-x.y.z.tgz ./emr-vue-x.y.z.tgz react react-dom

Vue 工程为什么要装 react？

@emr/vue 内部复用 React 版组件渲染（含全部内置 UI），react / react-dom 仅作为渲染引擎，业务代码一行 React 都不用写；单独安装 @emr/editor 会因找不到 @emr/core 报错——两个包必须成对出现；

升级 = 下载新版 tgz 覆盖安装；文档 JSON 结构向前兼容，旧文档可直接加载。

【五、第一个示例（三端对照）】

下面三个示例干同一件事：在页面上放一个带工具栏的空白编辑器。都能跑通后再往下学「保存 / 加载 / 导出」。完整步骤与逐行讲解见各平台《集成详解》。

React：

import { useRef } from 'react';

import { EmrEditor, emptyDoc, type EmrEditorHandle } from '@emr/editor';

export default function EditorPage() {

const api = useRef<EmrEditorHandle>(null); // 命令式 API 句柄

return (

<EmrEditor ref={api} initialDoc={emptyDoc()} toolbar

style={{ height: '100vh' }} />

);

}

Vue 3：

import { ref } from 'vue';

import { EmrEditor, emptyDoc, type EmrEditorHandle } from '@emr/vue';

const api = ref<EmrEditorHandle | null>(null);

</script>

<EmrEditor ref="api" :initial-doc="emptyDoc()" toolbar

style="height: 100vh" />

</template>

纯 HTML：

EMREditor.createEditor(document.getElementById('editor-host'), {

toolbar: true

});

</script>

注意：编辑器需要一个有高度的容器（如 100vh 或固定像素），它自己管理滚动；容器高度为 0 是新手最常见的问题。

【六、最重要的三件事】

1. 文档就是一个 JSON：整份文档（正文 + 页面设置 + 数据绑定 + 留痕日志 + 打印标记）序列化成一个 JSON 对象，保存到数据库、加载回来即完整恢复。不用建一堆表存段落。

const json = api.getJSON(); // 取出 JSON 字符串

await fetch('/api/emr/save', { method: 'POST', body: json });

api.setDoc(await fetch('/api/emr/load?id=1').then(r => r.json()));

2. 显示模式与只读是两回事：viewMode（edit / preview）只管「怎么画」——编辑模式给数据域上标记色，预览模式按普通文本画（PDF 导出即此样式）；readonly 才管「能不能改」。想做成纯查看器，两个一起用：viewMode='preview' + readonly。

3. 2 页以内永久免费：未激活授权时，不超过 2 页的文档可使用全部功能（编辑 / 导出 PDF / 打印），无任何干扰；超过 2 页才受限（仅渲染前 2 页、导出打印需激活）。激活方式见《下载与授权说明》。

【七、阅读地图】

按需取阅，不必按顺序读完：

· 《React / Vue 3 / 纯 HTML 集成详解》—— 你所用平台的完整教程（Props 全解、保存加载闭环、典型场景）；

· 《文档 JSON 格式说明》—— 想手工生成 / 解析文档、或想理解存储结构时读；

· 《文本与表格详解》《图片与页面设置详解》—— 排版能力的界面操作与 API；

· 《数据源与录入域详解》—— 模板化 / 结构化采集核心，做病历系统必读；

· 《留痕与关键词详解》—— 质控合规能力；

· 《工具栏与自定义菜单详解》—— 想往工具栏加「保存到服务器」等自家按钮时读；

· 《PDF 导出详解》《打印与续打详解》《静默打印对接》—— 输出三件套；

· 《API 速查》《常见问题》—— 开发中随手查。