富文本编辑器

发布于:2023-01-01 ⋅ 阅读:(417) ⋅ 点赞:(0)

电子病历富文本编辑器开发

方案大纲 暂时发现三种

1.真分页 每个页面内容由每个页面的元素承载

2.假分页 分为“输入层”和“分页展示层”,输入的元素不分页,底层分页元素根据高度产生分页效果

3.不做实时分页 提供打印分页预览 输入时不做分页 提供打印分页预览(带页眉页脚)pdf、图片生成等

真分页方案

难点分析

  • 1.涉及字符级别的切割和运算(算法极难,操作复杂,基于富文本的病历编辑器目前没有先例)
  • 2.一次倒入多页内容时,运算量极大,容易卡顿,导致浏览器无响应等
  • 3.表格、组件分页切割问题(目前只能是再生成一个然后拼接)
  • 4.多页情况,操作第一页,后面的N多页面都需要重新排版布局
  • 5.富文本的事件都要监听(输入、选择、回车等),同时做大量运算,然后重新排版,如何保证性能?
  • 6.元素高度都不是统一的,要测算高度,就需要把所有节点都获取并获取其高度进行运算

假分页方案

假分页实现原理

  • 1.书写层:用于用户输入,它是一个整体,无论写多少页,其实 都是一个元素
  • 2.分页展示层:为分页效果展示,在书写层下方
  • 3.占位符:包含页眉页脚,占位不动 

 假分页难点分析

  • 1.涉及字符级别的切割和运算(算法极难,操作复杂,目前没有先例)
  • 2.一次倒入多页内容时,运算量极大,容易卡顿,导致浏览器无响应等
  • 3.表格、组件分页切割问题(目前只能是再生成一个然后拼接)
  • 4.多页情况,操作第一页,后面的N多页面都需要重新排版布局
  • 5.富文本的事件都要监听(输入、选择、回车等),同时做大量运算,然后重新排版,如何保证性能?
  • 6.元素高度都不是统一的,要测算高度,就需要把所有节点都获取并获取其高度进行运算
  • 7.占位符不随文档流自然排版,需要通过运算保持原位置

不做实时分页方案

难点分析

  • 1.如何在打印预览时插入页眉页脚(难点在于:要知道在哪插入页眉页脚,因为每个元素高度不同,要得知每页能放哪些元素同样面临每个元素高度计算,把每页元素都计算好,并在合适位置插入页眉页脚,同时面临元素、表格切割等问题)
  • 2.如何生成PDF?PDF也要带页眉页脚