Tiptap 3 / ProseMirror + Vue 3  ·  结构化病历,开箱即用

把结构化病历编辑器
嵌进你现有的 HIS

一个 <script> 标签即可接入,老系统、非 Vue 项目同样可用。零 UI 框架依赖、样式进 Shadow DOM 不污染宿主页面, 数据元 / 数据组 / 量表 / 公式 / 签名 / 续打一应俱全。

离线授权,无外网请求 —— 按机构代码绑定,适合医院内网部署

index.html
<!-- 1. 引入(UMD 单文件,CSS 已内联) -->
<script src="emr-editor.js"></script>

<!-- 2. 用标签写,就这一行 -->
<emr-editor
  preset="medical"
  title="入院记录"
  site-id="HOSP-430481-01">
</emr-editor>

<!-- 3. 想接管保存?监听事件即可 -->
document
  .querySelector('emr-editor')
  .addEventListener('save', e => {
    saveToHis(e.target.getHtml());
  });

入院记录

姓名:张某某住院号 202600913第 1 页 / 共 3 页
主诉

凭空闻声、疑人害己 3 年,加重 2 周

精神检查

意识清,定向力完整。引出资语性幻听,思维鸣响; 关系妄想及被害妄想存在,情感反应欠协调……

BPRS 简明精神病评定量表 · 18 项
1 关心身体健康
2 焦虑
4 概念紊乱
总分42
医师签名:________日期:________
Why

通用富文本写不了结构化病历

病历不是一篇文章。它是要被检索、被统计、被质控、被打印归档的数据。 用富文本硬凑,前期快,后期全是债。

×用富文本 + 占位符替换

模板导出的是一串 HTML 字符串,字段一改就错位;想统计"近半年入院时 BPRS 总分 > 40 的患者",只能正则去捞,捞不准也不敢改。

×自研一套编辑器

光标、选区、撤销栈、协同、跨浏览器兼容——每一条都够一个小组啃半年。而且做出来往往还是"能打字",不是"能出数据"。

emr-editor:结构化节点

数据元、数据组、量表、公式、签名都是文档模型里的一等节点,不是字符串。文档 JSON 可直接解析取值,改样式不影响数据。

emr-editor:老系统也能嵌

Web Component 形态,一个 <script> 标签接入,不要求 Vue、不要求构建工具。JSP / ASP.NET / 老 HIS 都能接。

Features

病历该有的能力,都在这里

内核零业务数据,能力以扩展形式提供。不需要的可以不开启——preset="generic" 时它就是一台干净的富文本。

数据元 / 数据组

把患者姓名、主诉时长、既往史拆成可取值、可校验的字段。支持必填校验与从患者上下文自动填充。

自动取值钩子必填校验字典服务

量表节点

量表作为结构化节点嵌入病历,逐项打分、自动算总分、结果随文档一起归档,不再靠手抄到另一张纸上。

自动计分随文档归档可注册扩展

修订留痕

谁在什么时候改了哪一段,逐条留痕可回溯。修订记录通过仓储接口落库,满足病历书写规范与质控要求。

增删改留痕修订面板仓储可插拔

分页与续打

A4 真实分页、页眉页脚、分栏、打印预览。续打支持从上次打印位置继续——病历跨页续打是刚需,不是锦上添花。

页面设置页眉页脚打印标记

批注与大纲

上级医师批注、段落级讨论;左侧大纲一键跳转到任一章节,长病历不用滚到眼花。

批注面板大纲导航查找替换

模板体系

模板列表由你自己的后端提供——fetchTemplates 一个钩子接入现有模板库,不必把数据迁到我们这儿。

后端钩子内置兜底分类检索

医学公式与签名

内置医学计算公式节点与医师签名节点,公式结果可参与后续取值,签名带签署人与时间。

公式节点签名节点结构化取值

样式隔离,不打架

Web Component 形态下样式注入 Shadow DOM,图标字体自带并内联——不会和你系统里的 CSS 抢优先级,也不缺图标。

Shadow DOM自带图标零 UI 框架依赖

离线授权,内网友好

Ed25519 离线签名,全程无网络请求。按机构代码绑定,不采集硬件指纹——终端镜像克隆、虚拟化都不会误伤。

无心跳机构绑定到期前提醒
Integration

三种接法,按你的系统挑

后端能力一律通过钩子注入,编辑器不 import 任何你的业务代码,也不绑定任何后端框架。

老系统页面
<!-- UMD 单文件,CSS 与图标字体已内联,无需额外引入 -->
<script src="/vendor/emr-editor.js"></script>

<emr-editor
  id="rec" preset="medical" title="入院记录"
  doc-id="IP-202600913" revision-enabled="true">
</emr-editor>

<script>
  var el = document.getElementById('rec');
  // 保存:宿主自己的后端接口,编辑器不关心
  el.addEventListener('save', function () {
    fetch('/api/emr/save', {
      method: 'POST',
      body: JSON.stringify({ html: el.getHtml() })
    });
  });
</script>

适合:JSP / ASP.NET / 其它语言后端的老 HIS。不需要 Vue、不需要打包器,加一个标签就能用。

EmrRecord.vue
import { mountEmrEditor } from 'emr-editor';
import 'emr-editor/dist/emr-editor.css';

const inst = mountEmrEditor('#host', {
  preset: 'medical',
  docId: 'IP-202600913',
  revisionEnabled: true,

  // 三个钩子把后端接进来,编辑器不 import 任何业务代码
  onSave: async () => {
    await saveRecord({ html: inst.getHtml() });
  },
  fetchTemplates: ({ category }) => listTemplates(category),
  resolveDataElement: (field) => patientOf(field.source),
});

适合:Vue 3 项目。ESM 产物已外部化 vue@tiptap/*,与应用共用同一份实例,不存在双实例问题

自建编辑器
import { createFullEmrExtensions, medicalExtensions } from 'emr-editor';
import { Editor } from '@tiptap/core';

// 只取扩展数组,自己的界面、自己的工具栏
const editor = new Editor({
  extensions: createFullEmrExtensions({ preset: 'medical' }),
  content: html,
});

// 或者:只拿医疗结构化扩展,混进你已有的 StarterKit
const mine = [...baseExtensions(), ...medicalExtensions];

适合:已有编辑器界面、只想补结构化能力,或需要深度定制交互的团队。

应用入口
import { configureLicense } from 'emr-editor';

// 授权码与机构代码都由你们 HIS 后端下发,前端拿到调一次即可(全局单例)
configureLicense({
  key:    'EMR1-…',            // 下发的授权码
  siteId: 'HOSP-430481-01',     // 机构代码
});

// 不配授权码 → 进入 30 天全功能试用(带水印与横幅),到期转只读
// 只读仍保留:查看 / 滚动 / 查找 / 导出 / 打印 / 续打

注意:离线验签,不依赖 Web Crypto——内网 http://192.168.x.x 这类非安全上下文下也能正常工作。

专科数据包

精神科量表与病历模板,开箱即用

我们自己在精神专科医院的信息科做了多年。量表怎么嵌进病历、护理记录单怎么排、 BPRS 总分怎么随文档归档——这些不是从文档里抄来的,是天天在用。

  • BPRS 简明精神病评定量表 · 18 项,自动计分
  • HAMD / HAMA 抑郁与焦虑量表
  • 精神科入院记录 / 首次病程 / 护理记录单模板
  • 量表随模板进入文档,无需手抄、无需二次录入
索取数据包清单
BPRS · 18 项 逐项 1–7 级评分,自动汇总总分并随病历归档
HAMD · 24 项 抑郁程度评定,支持因子分统计
护理记录单 精神科专科观察项,A4 分页续打
自建量表 / 模板 registerScale() / registerTemplate() 自己做——永远免费、不设门禁
Specs

集成前你该知道的

都是能写进技术协议的硬指标。

技术栈
Tiptap 3 / ProseMirror Vue 3 组件;同时提供 Web Component 与 ESM / UMD 双产物
框架依赖
零 UI 框架依赖 不依赖 antd / Element / Vben;样式进 Shadow DOM,图标字体自带
产物形态
ESM + UMD + CSS UMD 单文件全自包含;ESM 外部化 vue 与 @tiptap/*,避免双实例
网络要求
无需外网 离线签名授权,零心跳请求;非安全上下文(http)同样可用
数据归属
100% 在你手里 保存、模板、数据元取值全走宿主钩子,编辑器不碰你的数据库
对外 API
冻结基线 + 回归网 24 props / 6 事件 / 28 实例方法;变更遵循废弃周期,不突然改
质量保障
近 200 例回归测试 快照 / 契约 / 实例 / 注册表 / 纯度五类;发版前人工冒烟 12 条
交付物
产物 + BUILD-INFO 带版本与 sha256 清单,可核对现场跑的是哪一份产物
Pricing

四个版本,功能完全一致

我们不做功能分级——不把"能不能用某个功能"拿来收费。 版本差异只在站点数、期限、源码与响应速度。专科数据包按需加购。

试用版

免费30 天,全功能
  • 全部编辑器功能
  • 含全部专科数据包
  • 1 个站点
  • 水印与到期提醒
申请试用
最常选

Standard

获取报价单院区 · 永久授权 + 年维护
  • 全功能,无水印
  • 1 个站点 / 院区
  • 工单支持(T+3)
  • 远程实施与培训
  • 专科数据包按需加购
联系获取报价

Professional

获取报价≤ 5 院区 · 多站点
  • Standard 全部内容
  • 不超过 5 个站点
  • 含 1 个专科数据包
  • 优先支持(T+1)
  • 现场实施 1 次
联系获取报价

Enterprise

一院一议框架协议
  • 站点数不限
  • 全量数据包 + 定制开发
  • 源码开放,可二次开发
  • 专属支持与定制
商务洽谈

专科数据包单独定价;客户自建量表与模板 永远免费、不设门禁

FAQ

信息科最常问的几个问题

我们的 HIS 不是 Vue 技术栈,能用吗?

能,这正是我们优先做 Web Component 的原因。UMD 单文件 <script> 引入后, 写 <emr-editor> 标签即可,CSS 与图标都已内联,不需要 Vue、不需要打包器。 JSP、ASP.NET、其它语言后端的老系统都能接。

病历数据会经过你们的服务器吗?

不会。编辑器不 import 任何你的业务代码,保存、模板、数据元取值全部由你通过钩子提供, 数据始终在你自己的后端与数据库里。编辑器本身也不发任何网络请求——授权校验是离线完成的。

医院内网没有外网,授权怎么校验?

离线签名授权(Ed25519),全程零网络请求,没有心跳、没有激活服务器。 而且验签走纯 JS 实现,不依赖 Web Crypto——内网常见的 http://192.168.x.x 非安全上下文下也能正常工作。

授权到期后是不是病历就打不开了?

不会。到期转只读,查看、滚动、查找、导出、打印、续打全部保留—— 归档和病历复印依赖打印,这块绝不会断。只禁"改动文档"的操作(输入、删除、保存、签名、提交修订)。 另外到期前 14 天开始提醒,不会静默到期。

我们有自己的量表和模板,能放进去吗?

能,而且不收费。registerScale()registerTemplate() 是公开 API, 自建量表与模板永远免费、不设门禁。我们卖的是现成的专科内容, 不是"能不能加内容"这个能力。

集成后会不会和我们系统里的样式打架?

Web Component 形态下样式注入 Shadow DOM,与外部隔离;图标字体自带并以 base64 内联, 不依赖宿主提供图标库。同时我们提供 doctor 体检脚本, 专门检查 Vue / ProseMirror 双实例——这是编辑器集成里最危险、也最难查的一类故障。

后续升级会不会把我们的定制改坏?

对外 API 有冻结基线(24 props / 6 事件 / 28 实例方法),任何增删改都要走 「标记废弃 → 保留至少一个 minor 周期 → 方可移除」。同时有近 200 例回归测试兜底, 其中包括快照测试——Tiptap 遇到未注册节点会静默丢弃内容,快照是唯一能发现这类问题的防线。

先试用 30 天,全功能

不用先谈价格。拿去接进你们的测试环境,跑一遍真实病历流程,再决定。

或直接联系:193 3050 7288·271301671@qq.com

试用期内功能完整,含全部专科数据包 · 到期前 14 天开始提醒