富文本前端分页能哪些可行方案_富文本页面_别把代码当饭吃的博客-程序员宅基地

技术标签： 前端框架  别把代码当饭吃  前端  javascript  

前言

        最近正在研究电子病历开发 基于富文本（slate）的开发方案 第一站就是研究富文本的分页方案 有志同道合的伙伴欢迎留言，后面还会持续更新

方案大纲 暂时发现三种

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也要带页眉页脚   

总结：目前我是实现了不实时分页的方案，市面的都昌编辑器就是不实时分页，难点用这篇博客就能解决
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38639882/article/details/123435852

智能推荐

JAVA和tomcat 环境的配置-程序员宅基地

为什么80%的码农都做不了架构师？>>> ..._java和tomcat环境的配置

dell3200存储使用的一些记录-程序员宅基地

dell3200和dell3200X是不一样的。3200是SAS，3200XX是NAS。在centos下安装dell3200的存储软件时，需要明确告知安装客户端。如果安装时选all了，可悲的是不会有client。这是dell客服告诉我的，需要单独指定安装。3200i发现设备：iscsiadm -m discovery -t sendtargets -p 192.168.130...._dell mdf3200存储换硬盘

android studio 一直卡在Gradle:Build Running的解决办法_gradle build running-程序员宅基地

1：找到路径C:\Users\zjstv\.gradle\wrapper\dists\，在此文件夹下有一个gradle版本文件夹，打开后是一个名字很长的文件夹，例如我的C:\Users\zjstv\.gradle\wrapper\dists\gradle-4.6-all\bcst21l2brirad8k2ben1letg然后下载对应版本的gradle，将下载的压缩包直接放进名字很长的文件..._gradle build running

uart和usart的区别_uart与usart 区别-程序员宅基地

uart　　通用异步收发传输器（Universal Asynchronous Receiver/Transmitter），通常称作UART，是一种异步收发传输器，是电脑硬件的一部分。它将要传输的资料在串行通信与并行通信之间加以转换。作为把并行输入信号转成串行输出信号的芯片，UART通常被集成于其他通讯接口的连结上。　　具体实物表现为独立的模块化芯片，或作为集成于微处理器中的周边设备。一般是RS-232C规格的，与类似Maxim的MAX232之类的标准信号幅度变换芯片进行搭配，作为连接外部设备的接口。_uart与usart 区别

操作系统03——生产者消费者线程同步问题实验_利用条件变量实现生产者-消费者同步-程序员宅基地

主要任务采用条件变量和互斥锁实现生产者消费者线程同步一、生产者消费者问题生产者进程生产产品，将产品提供给消费者进程消费。在两者之间设置有缓冲区，生产者将产品放入缓冲区，消费者从缓冲区中取走产品。两者之间需要保持同步，消费者不可以从空的缓冲区中取产品，生产者进程也不可以向已经装满产品的缓冲区投放产品。二、问题分析可以用一个数组buffer[n]来表示大小为n的缓冲区。每当投入一个产品时，buffer中的数组单元指针in加1每当取出一个产品时，buffer中的数组单元指针out加1由于buf_利用条件变量实现生产者-消费者同步

安全狗服云iphone版 轻松管理服务器安全-程序员宅基地

2019独角兽企业重金招聘Python工程师标准>>> ...

随便推点

java执行sql文件有注释,这个坑，我裂开了!!!mybatis的mapper.xml文件中sql语句前后有注释掉的sql都会报错，那注释这个功能在这还有毛用???/捂脸/捂脸......-程序员宅基地

Request processing failed; nested exception is org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.type.TypeException: Could not set parameters for mapping: ParameterMappi...

Unity销毁物体-程序员宅基地

销毁物体三种方式，各有不同使用SetActive中文文档使用 gameObject.SetActive(bool);设置物体的显示或者隐藏来大小销毁的效果，但它还是存在的，在Hierarchy中还是可以找到他的。作用就像是点击Inspector中的物体名称前面的对勾。//使用方式 gameObject.SetActive(true);//显示 gameObject.SetActive(false);//隐藏他会再次执行Enable方法，不会执行Awake和Start方法。使用Dest_unity销毁物体

sqlserver(MSSQLSERVER)无法打开 错误：1067 程序意外终止_sqlserver错误1067进程意外终止-程序员宅基地

解决方法：1：设置C:\Program Files\Microsoft SQL Server\MSSQL右键文件，选择属性----安全-----找到连接的账号，设置权限为完全控制。2：测试一下，还是不行的话就是binn文件丢失或者损坏，复制正常的sql服务器上的C:\Program Files\Microsoft SQL Server\MSSQL/binn文件到现在的服务器上，选择覆盖..._sqlserver错误1067进程意外终止

Open3D 实现CSF布料模拟算法-程序员宅基地

CSF布料模拟算法在open3d模块下的实现。_布料模拟算法

小程序组件和组件的嵌套之间的通信-程序员宅基地

前言： 小程序中组件嵌套比较频繁的情况下，比如两个都是自定义组件，他们直接的嵌套通信应该如何做呢，小程序官网提供了这样的一套方法（注：摘自官网，官网入口）组件间关系定义和使用组件间关系有时需要实现这样的组件：<custom-ul> <custom-li> item 1 </custom-li> <custom-li> item 2 </custom-li></custom-ul>这个例...

Data Grid-程序员宅基地

https://docs.devexpress.com/WindowsForms/3455/controls-and-libraries/data-gridData GridAug 27, 2019 12 min to readTheWinForms Data Grid(GridControl) provides rich capabilities for displaying, ..._data grid

推荐文章

热门文章

相关标签