基于canvas-editor的电子病例编辑器插件开发指南

最新推荐文章于 2026-04-19 11:56:23 发布

原创

最新推荐文章于 2026-04-19 11:56:23 发布 · 436 阅读

标签

#canvas-editor #电子病历编辑器 #插件开发 #前端开发

1. 为什么选择canvas-editor来开发电子病历编辑器？

如果你正在医疗信息化领域摸爬滚打，想给医生们开发一个既好用又专业的电子病历书写工具，那你肯定纠结过技术选型。市面上富文本编辑器不少，但一遇到病历这种特殊场景——需要严格的结构化、复杂的排版、大量的医学符号，还有那要命的打印格式要求——很多编辑器就“露怯”了。我前几年就踩过这个坑，用传统DOM-based的编辑器做病历，光是处理表格跨页、保持页眉页脚一致就掉了一大把头发。

后来接触到 canvas-editor，感觉思路一下子打开了。它最大的不同在于，它的渲染核心不是操作DOM，而是基于Canvas和SVG。这意味着什么？简单来说，它把文档当成一张“画布”来处理。医生输入的每一段文字、每一个表格、每一张图片，在底层都被精确地计算和绘制在画布上。这样做的好处太明显了：排版极度精确。你完全不用担心在不同浏览器里显示效果不一样，打印出来的纸质病历和屏幕上看到的能保持毫米级的一致，这对医疗文书的法律效力至关重要。

另一个让我决定用它做电子病历插件的原因是它的数据与视图分离做得非常干净。我们开发的编辑器插件，核心是处理病历的业务逻辑，比如病历文书的结构化模板、医学术语的自动补全、诊断编码的关联。canvas-editor只负责忠实地、高性能地把我们组织好的数据渲染出来。它提供了一套清晰的API和配置项，我们不用去深究它底层是怎么画线的、怎么分页的，只需要告诉它：“这里放一个标题，居中显示”，“这个段落是主诉，字体加粗”，“下面插入一个生命体征表格”。这种分工让插件开发变得专注和高效。

所以，如果你面临的场景是：需要高度定制化的编辑器界面（毕竟医院各科室的病历模板千差万别）、对打印和归档的格式有严苛要求、并且希望编辑体验流畅稳定，那么基于canvas-editor进行二次开发，会是一个经过实战验证的靠谱选择。它不是一个开箱即用的“电子病历系统”，而是一个强大的“画板”，给了我们这些开发者最大的创作自由。

2. 快速上手：搭建你的第一个病历编辑器原型

光说不练假把式，咱们直接动手，用最短的时间让一个最简版的病历编辑器跑起来。这个过程能帮你快速建立对canvas-editor的感性认识。

首先，在你的项目里安装它。打开终端，执行：

npm i @hufe921/canvas-editor --save

或者如果你用yarn：

yarn add @hufe921/canvas-editor

安装完成后，在你的HTML里准备一个容器，这个div就是编辑器将要居住的“房子”：

<div class="medical-editor-container" style="width: 210mm; height: 297mm; border: 1px solid #ccc;"></div>

这里我直接把样式写成内联了，宽度设置成A4纸的尺寸（210mm），这是为了模拟真实病历的打印版面，一开始就建立“所见即所得”的认知。

接下来，在你的JavaScript入口文件（比如main.js或某个Vue/React组件的setup/useEffect中）里，引入并初始化编辑器：

import Editor from '@hufe921/canvas-editor'

// 找到我们准备好的容器
const container = document.querySelector('.medical-editor-container')

// 初始化编辑器实例
const editorInstance = new Editor(
  container,
  {
    // 第一份文档的初始内容
    header: [
      { value: 'XX医院住院病历', rowFlex: 'center', size: 16, bold: true }
    ],
    main: [
      { value: '主诉：', bold: true },
      { value: '反复咳嗽、咳痰10年，加重伴气促2天。' },
      { value: '\n' }, // 换行
      { value: '现病史：', bold: true },
      { value: '患者10年前...（此处为示例文本）' }
    ],
    footer: [
      { value: '第 {pageNo} 页 / 共 {pageTotal} 页', size: 10, rowFlex: 'right' }
    ]
  },
  // 这里是关键的options配置对象，我们下一节会详细讲
  {
    mode: 'page', // 页面模式，类似Word
    height: 297, // 页面高度，单位毫米
    width: 210,  // 页面宽度
    pageMode: {
      pageGap: 15 // 页间距，像素
    }
  }
)

把这几行代码敲完，刷新页面，你应该就能看到一个具有基本排版、带页眉页脚的文档编辑器了。你可以用鼠标点击“现病史”后面的文字区域，尝试输入、回车换行，体验一下。虽然现在还没有我们熟悉的那个Word式的菜单栏（是的，它默认不提供！），但你已经拥有了一个内核强大、格式精准的编辑引擎。

我建议在这个原型阶段多玩一下，比如试试把header里的rowFlex改成'left'或'right'，看看页眉对齐方式的变化；或者把footer里的{pageNo}这个占位符删掉，看看页码还显不显示。这个过程能帮你理解canvas-editor的数据驱动模型：你通过修改配置和数据，编辑器自动重新渲染出新的画面。这是后续我们开发所有插件功能的基础思维模式。