[发明专利]一种富文本编辑器深度集成在线绘图组件的方法和系统

说明书

本发明涉及一种富文本编辑器深度集成在线绘图组件的方法和系统，属于WEB文档在线编辑技术领域，该方法包括：在线文档富文本编辑器中定制加载单元，初始化绘图引擎，定制绘图信息回传数据至富文本编辑器；通过触发保存项单元调用http通信，将所有图文记录传输至服务器存储并与编辑器操作数据交互；将存储数据重新渲染于编辑器中，双击操作图形将重新加载绘图引擎，处理绘图数据后可视化于绘图单元中，可继续绘制该图形。该系统即为可实现上述方法的计算机程序。本发明实现在WEB文档在线编辑过程中使用富文本编辑器绘制多类型的图形展示信息，以提高富文本编辑器的延展性、业务功能丰富性。

技术领域

本发明涉及一种富文本编辑器深度集成在线绘图组件的方法和系统，属于WEB文档在线编辑技术领域。

背景技术

现代客户端浏览器基于富文本编辑器的文档在线编辑技术在集成绘图功能方面比较局限，其功能适用性和用户体验度无法与专业绘图工具相媲美。但在线文档编辑过程中，插入一些复杂图表、线框图、流程图、网络图等是很常见的业务功能。为了满足此功能需求同时避免在同一软件系统不同模块中使用的富文本编辑器存在差异。因此，如何提供一种富文本编辑器深度集成在线绘图组件，能够实现扩展富文本编辑器的绘图能力以及降低技术开发难度，成为了一个亟待解决的问题。

发明内容

为了解决上述技术问题，本发明提供一种富文本编辑器深度集成在线绘图组件的方法和系统，其具体技术方案如下：

一种富文本编辑器深度集成在线绘图组件的方法，包括以下步骤：

步骤1：在富文本编辑器中定制加载项单元；

步骤2：加载项单元执行事件函数，启动绘图功能索引，补充初始化原理，初始化绘图引擎，将绘图信息传入绘图引擎，绘图单元可视化展示；

步骤3：在绘图单元自定义绘制图形，绘制图形以后，click事件执行保存项单元函数，调用标准的跨源通信Api，将绘图单元绘制的图形回传至富文本编辑器。富文本编辑器将图形插入并展示于内容展示区域中。保存项单元函数将绘制的图形编译为字节码数据，并把字节码数据绑定于富文本编辑器中图形的data属性值；

步骤4：保存项单元执行事件函数，触发富文本编辑器执行记录动作，富文本编辑器将全部绘图单元绘制的图形及编码信息，形成文档图文数据，并全部记录。然后事件函数通过http通信将文档图文数据传输到服务端，服务端将数据存储于数据库；

步骤5：富文本编辑器与服务端数据交互，使用http通信方式获取存储在数据库中自定义文档数据；

步骤6：获取服务端的文档图文数据，基于服务端的文档图文数据，加载项单元将文档图文数据传递到富文本编辑器中，富文本编辑器重新渲染展示文档图文数据。

进一步的，进入步骤6以后如需继续编辑图形，则富文本编辑器中的图形绑定dblclick事件，通过触发该事件，事件函数将图形data属性值按绘图引擎数据格式转换成绘图信息，重新加载绘图引擎，把绘图信息传入至绘图引擎，绘图引擎把绘图信息还原为可编辑的图形单元，可视化于绘图单元中，用户可继续绘制或修改该图形。

进一步的，所述步骤1具体为调用富文本编辑器标准的扩展函数，生成并构建加载项单元，所述加载项单元包括操作按钮或功能链接，所述加载项单元用于触发绘图引擎的初始化。

进一步的，所述步骤2启动绘图功能索引具体为：富文本编辑器将绘图启动的基础数据传输至绘图引擎，然后将绘图操作界面可视化展示于绘图单元，用户在绘图操作界面可自定义绘制图形；

初始化绘图引擎具体包括：安装画布核心库、注册扩展图形库、定义画布数据对象和监听鼠标事件函数。

进一步的，所述步骤3将绘图单元绘制的图形回传至富文本编辑器，具体包括以下步骤：