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

权利要求书

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

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

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

启动绘图功能索引具体为：富文本编辑器将绘图启动的基础数据传输至绘图引擎，然后将绘图操作界面可视化展示于绘图单元，用户在绘图操作界面可自定义绘制图形；初始化绘图引擎具体包括：安装画布核心库、注册扩展图形库、定义画布数据对象和监听鼠标事件函数；

步骤3：在绘图单元自定义绘制图形，绘制图形以后，click事件执行保存项单元函数，调用标准的跨源通信Api，将绘图单元绘制的图形回传至富文本编辑器；

富文本编辑器将图形插入并展示于内容展示区域中；

保存项单元函数将绘制的图形编译为字节码数据，并把字节码数据绑定于富文本编辑器中图形的data属性值；

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

步骤31：保存项单元执行事件函数，将图形信息转化为元素data属性值，同时生成图形文件并转换为html格式和8Bit字节码信息；

步骤32：将元素data属性值和8Bit字节码通过函数参数方式回传给富文本编辑器，富文本编辑器将图形可视化展示文档图文数据；

步骤4：保存项单元执行事件函数，触发富文本编辑器执行记录动作，富文本编辑器将全部绘图单元绘制的图形及编码信息，形成文档图文数据，并全部记录；

然后，事件函数通过http通信将文档图文数据传输到服务端，服务端将数据存储于数据库；

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

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

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

2.一种富文本编辑器深度集成在线绘图组件的系统，其特征在于：所述系统提供富文本编辑器深度集成在线绘图组件的Web端程序和用于存取数据的服务端程序；

所述系统被处理执行时，实现如权利要求1所述的方法，所述Web端程序包括加载项单元、绘图单元、保存项单元、在线绘图功能可视化单元和操作单元；所述加载项单元用于初始化处理绘图数据的绘图引擎；所述绘图单元用于在线绘图和绘图的可视化；所述保存项单元用于存储绘图数据及图形文件编码信息的全部记录；所述在线绘图功能可视化单元用于提供绘图功能；所述操作单元用于调用回调函数回传至富文本编辑器。