DCWriter - 一款纯前端的电子病历编辑器
技术架构演进历程
本文介绍一款电子病历编辑器从2012年至今的技术架构演进过程，记录了从桌面端到纯前端Web的技术路线探索。
1.0 桌面版（2012年至今）
1.0版为桌面端结构化编辑器，支持 WinForm 与 WPF 开发，同时兼容 PB、Delphi、VB、C++ 等语言，通过 COM 接口集成。该版本采用原生桌面技术，性能较优。
2.0 IE版（2015–2017）
2.0版以 ActiveX 插件形式运行于浏览器端，是桌面版 COM 接口的延伸。该版本主要面向早期基于 IE 浏览器开发的 Web 应用，但仅支持 IE 或其内核环境，兼容性受限。
3.0 ASP.NET版（2017–2019）
3.0版为基于 WebForm 的网页版编辑器，提供基础的结构化编辑与打印功能，适用于网页端的简单查看与打印需求。该版本功能相对简化，不支持复杂工具栏操作。
4.0 HTML5版（2019–2025）
4.0版为基于 HTML5 的前端编辑器，后端依赖 .NET Core 服务部署，支持结构化编辑、级联、留痕、复杂打印等功能。该版本在实时分页功能上存在技术难点，且对后端服务有较重依赖。
5.0 Canvas版（2022年至今）
5.0版基于 WASM + Canvas 技术构建，显著提升了跨浏览器一致性，避免了因浏览器版本差异带来的展示问题。该版本支持百页文档的快速加载，并在数据格式支持与 API 接口方面有所扩展。
简介
DCWriter 是一款基于前端技术的富文本编辑器，提供类似Word的编辑体验，支持多种文本格式和样式设置。该编辑器支持拖拽式插入结构化元素，在保持流式排版灵活性的同时，也能实现结构化模板的快速构建。
适用人群和场景
对于toB的开发者
- DCWriter提供了特色的结构化文书功能。它提供自由文本录入的功能，同时还能提供表单区域来限制特定区域的录入方式。
- DCWriter实现了自定义的DOM模型，这就提供了无限的扩展能力。开发者可以据此创建新的文档元素类型，使得软件更符合具体业务需求。比如开发者可以用它来开发模板制作工具，来动态定义用户业务所需的各种复杂的表单界面。
- DCWriter不是基于HTML DOM，而是自行实现了文档排版算法，这就突破了HTML DOM的一些技术限制。比如实现了可靠的Undo/Redo功能，而且在不同的浏览器间保持完全一致的排版结果。
- DCWriter采用XML格式进行存储，结构简单。这就使得开发者可以很容易开发出后台程序来批量处理数百万份文档而不必调用DCWriter软件模块。
对于Web开发者
- 它是一个纯前端的组件，不依赖于第三方组件，支持Chrome和Firefox等主流浏览器。
- 支持实时分页，完全的所见即所得，在不同的浏览器呈现完全一致的排版效果，可靠的Undo/Redo操作。
- 支持Windows、Linux、Mac、安卓、iOS等多种操作系统。
- 它提供很简洁的API编程接口，可以很方便的实现分页标签多文档模式。
对于电子病历开发者
DCWriter提供专业的临床医疗文书相关功能:
- 结构化病历文书功能。
- 可应用于医生工作站的病历编辑、护士工作站的护理记录录入、区域医疗客户端病例编辑、PASC/LIS/RIS报告编辑打印、病案首页、出院小结、病程记录、手术记录、各种知情书、康复及精神学科用的量表、临床路径用表单界面等场景。
- 支持书写痕迹保留、多级权限控制、多种医学表达式（如牙位图、月经史等），并能自动计算评分量表分值。
- 能够满足国家电子病历系统功能应用水平分级评价的相关技术要求。
- 支持医院信息互联互通标准化成熟度测评的相关技术标准。
- 符合国家信创战略要求，已获得统信、麒麟、方德等国产操作系统认证。
- 配套模板设计工具兼容国产中间件（如东方通），兼容达梦、人大金仓等国产数据库。
对于信创开发者
DCWriter通过了国产麒麟、方德、统信等操作系统的原厂认证；支持加载和保存OFD文件；符合信创技术要求。
对于最终使用者
DCWriter提供了简约而不简单的文档编辑功能：
- 它提供类似MS Word的用户体验，用户无需学习即可上手使用。
- 它能进行精确的实时分页，实现了所见即所得的功能，无限制的Undo/Redo操作，帮助用户快速达成目标。
- 提供表格、标题表格行等多项功能，可以快速创建复杂排版的文档。
能胜任的应用场景
- 结构化电子病历系统：帮助医生书写门急诊病历、病案首页、入院记录、病程记录、检查检验报告单、护理记录、患者知情同意书、出院记录、量表、评估单等。
- 政府电子公文系统：支持各类公文模板定义、审批流程管控、版本痕迹追踪，并可根据业务流程动态调整公文内容和状态。
- 金融业务合规文档：利用结构化文档技术，便于从合同、报告、评估单等文档中抽取关键数据进行合规检查和风险管控。
- 制造业表单系统：快速定义生产流程表单、质检记录单、设备维护记录等，支持复杂节点数据录入和后台分析。
- 教育培训管理：试卷制作、学生档案管理、教案模板设计、成绩单生成、培训记录表、课程评估表等教育场景应用。
- 法律服务机构：合同模板制作、法律文书编辑、案件档案管理、庭审记录、律师函模板、法律意见书等专业文档处理。
- 保险行业应用：保单管理、理赔单据处理、风险评估报告、客户信息表、保险产品说明书、核保审核表等。
- 人力资源管理：员工档案管理、简历模板设计、绩效评估表、薪酬核算单、培训记录、离职手续表等HR文档。
- 物流运输行业：运单管理、货物清单、配送记录、仓储管理表单、车辆维护记录、客户服务单等物流文档。
- 房地产开发：购房合同、租赁协议、项目进度报告、客户档案、物业管理表单、房源信息表等地产文档。
- 科研院所机构：实验记录表单、研究报告模板、数据采集表、项目申请书、学术论文模板、科研成果档案等。
- 审计咨询服务：审计报告模板、财务核查表单、合规检查记录、咨询方案模板、风险评估报告等专业文档。
- 建筑工程管理：施工记录表、工程进度报告、安全检查表、材料清单、验收报告、变更单等工程文档。
- 零售连锁管理：商品信息表、库存管理单、销售报告、客户信息管理、促销活动表单、门店运营记录等。
- 其他业务场景：凡是涉及结构化数据录入、复杂排版、精准打印、流程管控的文档处理场景均可应用。
技术问答
-
为什么不直接使用Word？而需要使用专业的编辑器？
答：Word作为通用文书编辑工具，虽然功能强大，但在专业业务场景中存在一些限制：- 功能定制局限性：无法针对特定行业需求进行深度功能定制
- 集成开发困难：不支持二次开发集成，难以与现有业务系统无缝对接
- 结构化能力不足：对结构化数据的支持相对薄弱，无法满足复杂业务表单需求
- 跨平台兼容性：在Web环境下的表现不够稳定，难以保证一致性体验
而专业的Web编辑器专为解决这些问题而设计：擅长结构化文档编辑、支持深度定制开发、提供丰富的API接口、确保跨浏览器一致性，更适合专业业务场景。
-
基于HTML5与基于Canvas技术路线哪个更好？
答：在大多数复杂文档编辑场景下，Canvas技术路线具有一些优势，主要体现在：- 性能表现：能够实现大文档（百页级别）的流畅编辑，减少卡顿现象
- 浏览器兼容性：对不同版本浏览器的兼容性较好，可以避免因浏览器差异导致的显示问题
- 渲染一致性：在各种浏览器环境下能够呈现更一致的排版效果
- 技术架构：基于WASM + Canvas的架构设计，可以突破传统HTML DOM的一些技术限制
- 功能实现：支持精确分页、复杂排版、实时预览等功能
这也是DCWriter从4.0版本的HTML5架构升级到5.0版本Canvas架构的主要原因。
-
DCWriter与其他编辑器相比有什么特点？
答：DCWriter在技术实现上有以下特点：- 技术积累：从2008年开始底层架构设计，2012年首版发布，经过多年技术迭代
- 性能优化：内存占用相对稳定可控，持续进行性能优化，能够处理大规模文档编辑场景
- 功能完整性：功能特性较为丰富全面，在医疗信息化领域有一定应用经验积累
- 行业专业化：深度聚焦垂直领域需求，针对特定行业场景进行了优化
-
DCWriter支持AI集成吗？
答：DCWriter采用开放式AI集成策略：- 产品定位：编辑器本身专注于核心文档编辑功能，不直接开发AI相关产品
- API接口：提供了与AI交互的API体系，支持多种AI应用场景集成
- 集成示例：提供实际应用的交互示例和参考实现
- 应用场景：可支持智能文档生成、内容校对、结构化数据提取、自动排版优化等AI应用
- 开发方式：通过标准化接口设计，开发者可以在此基础上构建AI文档处理应用
DCWriter 功能清单
运行环境
- 支持Windows、Linux、MacOS、iOS、安卓、统信、麒麟、方德等操作系统。
- 支持Chrome、Firefox等浏览器。
- 纯前端组件，不依赖服务器端，不依赖任何第三方组件。
文件格式
- 使用xml或json作为基础结构化格式，
- 支持导出PDF、OFD等版式格式，支持导出HTML、RTF、TXT、图片等其他格式。
页面设置
- 支持A4、A3、B5、B4等多种纸张类型。
- 支持横向和纵向打印。
- 支持上下左右的边距设置。
- 支持全局性文档网格线。
- 支持页眉页脚的设置。
- 支持页码的设置。
- 支持打印预览功能。
- 文字水印和图片水印。
- 文档背景图片。
- 支持首页页眉页脚不同。
- 支持文档结尾终结标记（文本[比如"以下空白"]、斜线或者S线）。
- 支持上、左、右装订线。
打印
- 支持打印预览；
- 支持乱序打印、打印指定页等；
- 支持续打、偏移续打、选择打印等；
- 支持以纯黑色打印文字和线条，以适应黑白打印机；
- 支持生成html供开发者自定义打印功能；
- 提供本地打印服务，支持实现静默打印、本地缓存备份等功能。
复制粘贴
- 支持纯文本、HTML、私有格式的文档内容的复制粘贴；
- 支持编辑器内的复制、粘贴行为的权限控制。
重做/撤销
- 支持不限制次数的重做和撤销操作
文本样式
- 支持粗体、斜体、下划线、删除线的字体样式设置。
- 支持双下划线、波浪线等多种下划线样式。
- 支持单独设置下划线的颜色。
- 支持设置字体名称和字体大小。
- 支持字体颜色和背景色的设置。
- 支持文字高亮显示。
- 支持文字下方的着重符号。
- 支持文字套圈，包括圆形框和方形框。
- 支持文字上标和下标。
标尺
- 支持横向和纵向标尺。
- 支持拖拽标尺的刻度来设置页边距。
- 支持拖拽标尺的刻度来设置段落边距。
视图模式
- 表单视图模式。可以设置为表单视图模式，用户操作只能限制在文本域内。输入域之外的内容不能被选中和编辑。
- 阅读视图模式。文档内容只读，和打印预览类似，但可以进行文本选择和复制。
- 长文档视图模式。不进行分页显示，但显示分页虚线，文档正文不中断的显示和编辑。
- 多栏显示模式。根据屏幕的宽度，自动调整显示的栏数。
- 横向滚动模式。文档内容横向排列，适合宽屏显示器。
- 设计视图模式。专用于模板设计的模式。
段落样式
- 支持行间距和段落间距。
- 支持段前段后间距。
三级权限内容管控
- 可以进行用户登录操作，用户具有超过3个权限等级设置。
- 高用户权限可以修改删除低用户权限的内容。
- 低用户权限不能修改高权限用户输入的内容。
- 支持逻辑删除。
- 不同的权限等级可以设置不同的痕迹样式。包括删除线的颜色，输入内容的下划线颜色，删除线和下划线的数量等。
- 可以显示和隐藏逻辑删除的内容。
- 可以用留痕模式显示文档内容。
- 可以用清洁模式显示文档内容。
文档批注
- 支持添加和删除文档批注。
- 支持用户编程自定义文档批注，以满足回复和标记解决等功能。
多语言支持
- 支持阿拉伯语、希伯来语等从右到左的语言。
- 支持藏文。
- 支持生僻字。
排版
- 支持从右到左排版。
- 输入域支持单行缩小字体自动填充。
- 表格单元格支持单行或多行缩小字体自动填充。
- 可以使用HTML代码来自定义文档批注的显示和行为。
数据源绑定
- 支持数据源绑定，数据源可以是JSON、XML等格式。
- 支持数据源的动态更新。
- 支持表格类的动态扩展行、列的数据更新。
数值运算公式
- 支持数值运算公式，可以在输入域元素中进行数值计算。
- 支持公式计算，公式可以是简单的加减乘除，也可以是复杂的数学公式。公式语法参考EXCEL。
- 公式可以设置文档元素的文本内容和可见性。
文档区域内容保护
- 可以在一段文本中设置部分内容为只读状态，禁止编辑和删除。
- 可以设置表格、表格行、单元格、输入域元素、勾选框等为只读状态。只读状态可以在DOM树中进行继承判断。
文档DOM结构
DCWriter实现了自己的DOM模型，使用了可编程的DOM对象表示文档中的所有的信息，这突破了HTML DOM的一些限制，可以满足更多的应用场景。目前DCWriter支持一下的DOM元素类型：
- XTextDocument 文档元素
- 表示文档根节点，是DOM树的操作的入口点。
- XTextContainerElement 容器元素，是一个抽象类，是所有容器元素的基类。
- 可以包含其他元素。
- XTextImageElement 图片元素
- 可以自由拖拽设置图片的大小
- 只支持JPG\PNG\BMP格式。
- XTextInputFieldElement 输入域元素（核心元素）
- 输入域高亮度显示
- 设置背景文本
- 内容校验，包括必填项、最大值、最小值、正则表达式、长度等
- 加密显示
- 左右边框、标签、单位等
- 固定宽度
- 多种录入方式：直接录入、下拉选择、多选、日期、时间等；支持自定义输出格式
- 可扩展自定义属性
- XTextLineBreakElement 换行元素
- 文本进行软回车，但不应用段落间距的设置。
- XTextPageBreakElement 分页元素
- 可以导致强制分页
- XTextPageInfoElement 页码元素
- 可以显示页码或者总页数
- XTextParagraphFlagElement 段落标记元素
- 可以设置为段落的首行缩进
- 可以设置为段落的悬挂缩进
- 可以设置为段落的对齐方式（靠左、居中、靠右、两端对齐）
- 可以设置段落的行间距和段落间距
- 可以设置数字列表和项目符号列表
- XTextTableElement表格元素
- 表格标题行
- 合并拆分单元格
- 鼠标拖拽来设置表格行的高度和表格列的宽度
- 表格行设置强制分页
- 表格行设置为不可跨页（不能被分页线分割）
- XTextCheckBoxElement/XTextRadioElement 单选框/单选按钮元素
- 可以设置为选中状态
- 可以设置为不可编辑状态
- 可以设置为必填状态
- 文本多行
- XTextImageElement 图片元素
- 可以设置图片悬浮在文本上面或者下面。
- 可以设置文字环绕图片。
- XTextLabelElement 文本标签元素
- 可以设置为自动计算大小
- 可以设置为多行文本
- 文本对齐方式（靠左、居中、靠右）
- XTextButtonElement 按钮元素
- 可以设置按钮的文本
- 可以设置按钮的颜色
- 可以设置按钮的大小
- XTextHorizontalLineElement 横线元素
- 可以设置横线的粗细和颜色
- XTextContainerElement 容器元素
- 可以设置最大允许的输入的文本长度。
- 可以设置允许输入的字符集（如仅允许输入数字、字母等）。
- XTextInputFieldElement 输入域元素
- 设置边框文本
- 设置前置的标签文本和后置的单位文本
- 设置背景文本的颜色
- 设置文本颜色
- 根据数据类型显示小按钮
- 右小角显示表示状态的小方块
- XTextButtonElement 按钮元素
- 可以设置鼠标按下和鼠标松开时显示不同的图片
- XTextPageInfoElement 页码元素
- 可以设置页码的格式（阿拉伯数字、罗马数字、大写罗马数字）
- 可以设置页码的起始值
- 可以设置格式化字符串，在一个页码元素中显示页码和总页数
- XTextCheckBoxElement/XTextRadioElement 单选框/单选按钮元素
- 可以将文本设置为流式排版
- 文本可以设置为放在勾选框的左边或者右边
- 可以数据源绑定
- 可以记录勾选历史记录。
- XTextImageElement 图片元素
- 支持更多的图片格式
- 支持从URL加载图片。
- XTextNewBarcodeElement 一维码元素
- 可以在条码下面显示文本内容
- XTextSectionElement 文档节元素
- XTextSubDocumentElement 子文档元素
- XTextTDBarcodeElement 二维码元素
- 可以设置二维码的内容
- 可以设置二维码的大小
- 可以设置二维码的纠错级别（L、M、Q、H）
- XTextChartElement 图表元素
- 可以设置图表的类型（柱状图、折线图、饼图等）
- 可以设置图表的数据源
- 可以设置图表的样式和颜色
- XTextPieElement 饼图元素
- 可以设置饼图的扇区颜色
- 可以设置饼图的标签文本
- XTextDirectoryFieldElement 目录域元素
- 可以设置目录的标题文本
- 可以设置目录的层级深度
- XTextControlHostElement 控件宿主元素
- 可以嵌入用户自定义的HTML元素
- XTextMediaElement 媒体元素
- 可以嵌入视频和音频文件
- XTextNewBarcodeElement 一维码元素
- 可以设置条形码的类型（Code128、Code39、EAN13、UPC等）
- 可以设置条形码的内容
- 可以设置条形码的大小
注：上述所有元素，支持DCWriter内置对话框插入，也支持用户通过API直接插入。
总结
本文介绍了DCWriter编辑器的技术架构演进、核心功能特性和应用场景。作为一款纯前端的富文本编辑器，DCWriter在结构化文档编辑领域提供了较为完整的解决方案。从最初的桌面版本到当前基于WASM + Canvas的5.0版本，经历了多个技术架构的演进。在实际应用中，该编辑器主要服务于医疗、政务、金融等需要结构化文档编辑的垂直领域。
扫一扫
873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
