介绍

基于富文本编辑器开发的项目
本项目主要用于 电子病历的预研

演示地址

http://emr.cymcar.com

软件架构

软件架构说明

1. 前端框架 vue3

2. typescript

3. tailwindcss

已经完成

1. 基础脚手架封装(已完成)

2. 病历样式类似world(已完成)

3. 页眉页脚(已完成)

4. 编辑器分页(已完成)

5. 自定义光标样式(已完成)

6. 自定义块状组件(已完成)

7. 气泡菜单(已完成)

8. 鼠标右键菜单(已完成)

9. 修改痕迹(已完成)

10. 批注(已完成)

11. 在线协同编辑(已完成)

12. 质控功能(已完成)

13. 自定义控件（下拉 单选 多选 svg交互）(已完成)

14. 历史记录(已完成)

15. 快照版本回退(已完成)

16. 电子签名(已完成)

病历 分页设计

分页思路

页面生命周期函数执行流程
1：键盘键入事件
2：触发view->update方法
3：触发state->apply方法
4：触发appendTransaction
执行逻辑:1->2->3->4

1）键入的时候计算 当前page的高度是否超出了 设置高度
2）如果超出，则在state中设置 insert或delete标志位
3）在Transaction的时候 执行页面分页逻辑
分页逻辑
如果插入的点永远在最后一页的最后一行则插入一个新的页面
如果插入的点不在最后一行例如总共5页 插入在了第三页
则逻辑比较复杂 把所有的 分页数据放到一个页面里
然后挨个计算页面里的每一个段落的高度 递归执行

示意图

映射关系图

结构对应

html 结构

"p"标签 分割思路

首先来看一段 段落内容

分页切割的时候如果不做任何段落的拆分的话会造成整个段落被拆分
所以需要把整个段落进行拆分
步骤：
1：首先获取整个段落的宽度
2：计算每个文字的宽度font-size
3:计算出第三行首字符的位置减一进行切割，循环执行