介紹

基于富文本編輯器開發(fā)的項目
本項目主要用于 電子病歷的預(yù)研

演示地址

http://emr.cymcar.com

軟件架構(gòu)

軟件架構(gòu)說明

1. 前端框架 vue3

2. typescript

3. tailwindcss

已經(jīng)完成

1. 基礎(chǔ)腳手架封裝(已完成)

2. 病歷樣式類似world(已完成)

3. 頁眉頁腳(已完成)

4. 編輯器分頁(已完成)

5. 自定義光標(biāo)樣式(已完成)

6. 自定義塊狀組件(已完成)

7. 氣泡菜單(已完成)

8. 鼠標(biāo)右鍵菜單(已完成)

9. 修改痕跡(已完成)

10. 批注(已完成)

11. 在線協(xié)同編輯(已完成)

12. 質(zhì)控功能(已完成)

13. 自定義控件（下拉 單選 多選 svg交互）(已完成)

14. 歷史記錄(已完成)

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

16. 電子簽名(已完成)

病歷 分頁設(shè)計

分頁思路

頁面生命周期函數(shù)執(zhí)行流程
1：鍵盤鍵入事件
2：觸發(fā)view->update方法
3：觸發(fā)state->apply方法
4：觸發(fā)appendTransaction
執(zhí)行邏輯:1->2->3->4

1）鍵入的時候計算 當(dāng)前page的高度是否超出了 設(shè)置高度
2）如果超出，則在state中設(shè)置 insert或delete標(biāo)志位
3）在Transaction的時候 執(zhí)行頁面分頁邏輯
分頁邏輯
如果插入的點永遠(yuǎn)在最后一頁的最后一行則插入一個新的頁面
如果插入的點不在最后一行例如總共5頁 插入在了第三頁
則邏輯比較復(fù)雜 把所有的 分頁數(shù)據(jù)放到一個頁面里
然后挨個計算頁面里的每一個段落的高度 遞歸執(zhí)行

示意圖

映射關(guān)系圖

結(jié)構(gòu)對應(yīng)

html 結(jié)構(gòu)

"p"標(biāo)簽 分割思路

首先來看一段 段落內(nèi)容

分頁切割的時候如果不做任何段落的拆分的話會造成整個段落被拆分
所以需要把整個段落進(jìn)行拆分
步驟：
1：首先獲取整個段落的寬度
2：計算每個文字的寬度font-size
3:計算出第三行首字符的位置減一進(jìn)行切割，循環(huán)執(zhí)行