CN113821756A - 基于富文本编辑器的Word图片自动转存方法及系统 - Google Patents

Abstract

本发明公开了一种基于富文本编辑器的Word图片自动转存方法及系统。该方法包括对Word文档中的复制的图文信息进行处理，设置全局转存规则，并将规则赋予内容、图片容器和图片，通过在粘贴板中获取的图片地址读取位于计算机的存储介质中的图片，将图片数组以文件流的形式传入后端服务器中，后端服务器对图片进行统一上传操作和压缩处理，将上传后的信息返回至前台，前端将后端服务器返回的图片信息进行解析并根据转存规则将图片和图片容器重组，再与内容进行结合，最终将完整的文章显示在富文本编辑器中。本发明解决了无法将Word文档中的图片信息直接复制到富文本编辑器中的问题，减少了维护人员不必要的重复性工作，同时提高了工作的效率。

Description

基于富文本编辑器的Word图片自动转存方法及系统

技术领域

本发明涉及图像处理技术领域，特别是涉及一种基于富文本编辑器的Word图片自动转存方法及系统。

背景技术

随着互联网技术的发展，各种类型的WEB项目都普遍使用富文本编辑器来发布图文资讯，然而这些图片资讯的来源一部分是运维人员从浏览器网页或者微信公众号等直接复制到富文本编辑器中，另一部分是运维人员直接从Word文档将图文信息复制到富文本编辑器内，这两种复制方式对于资讯中的图片信息都或多或少存在无法显示的情况。目前现有技术中关于富文本编辑器的图片自动上传方法是存在的，但是图片信息大多都是来源于浏览器网页和微信公众号等第三方，并未有针对Word文档中图片在富文本编辑器自动转存的方法。

发明内容

本发明的目的是提供一种基于富文本编辑器的Word图片自动转存方法及系统，用以解决无法将Word文档中的图片信息直接复制到富文本编辑器中的问题，减少了维护人员不必要的重复性工作，同时提高了工作的效率。

为实现上述目的，本发明提供了如下方案：

一种基于富文本编辑器的Word图片自动转存方法，包括：

将Word文档中的图文资讯复制到富文本编辑器中，设定富文本编辑器对于图文资讯的转存规则，按照转存规则设定所有图片容器的唯一标识；所述图文资讯包括图片、资讯内容和图片容器；所述转存规则用于资讯内容、图片容器及图片的一一对应；

根据从粘贴板中获取的图片的缓存地址找到图片位于计算机设备中的存储位置，将所有图片按照所述转存规则转为图片数组，并将图片数组以文件流的形式上传至后端服务器；

后端服务器对文件流形式的图片数组进行上传和压缩处理操作，将处理完成的图片存入到服务器和数据库中，并返回数据给前端；

前端用JavaScript语言解析后端服务器返回的信息，遍历图片数组，根据转存规则和图片容器标识，将图片与图片容器进行对应和重组，得到完整的资讯内容。

可选地，所述转存规则如下：

D1={A1:B1,A2:B2,...,An:Bn}

D2={C1:B1,C2:B2,...,Cn:Bn}

D=D1+D2

其中，An为第n个资讯内容、Bn为第n个图片容器、Cn为第n个图片；D1为图片容器位于资讯内容中的位置；D2为图片和图片容器的对应关系；D为图片位于资讯中的位置。

可选地，所述将所有图片按照所述转存规则转为图片数组，并将图片数组以文件流的形式上传至后端服务器，具体包括：

将图片读取为文件流，按照转存规则转为图片数组，将图片数组通过FormData函数模拟表单数据，通过XMLHttpRequest对象的send方法进行表单提交操作，将图片以文件流的形式提交至后端服务器。

可选地，后端服务器对文件流形式的图片数组进行上传和压缩处理操作，将处理完成的图片存入到服务器和数据库中，并返回数据给前端，具体包括：

根据默认设置的长宽尺寸对图片数组进行压缩处理，然后将压缩后的图片与服务器上存储的临时图片进行替换，并返回数据给前端。

可选地，根据转存规则和图片容器标识，将图片与图片容器进行对应和重组，得到完整的资讯内容，具体包括：

将数组中的每个图片元素按照转存规则与图片容器进行对应和重组，将图片和图片容器重组成img标签，然后将重组后的图片容器再次根据转存规则与资讯内容进行结合，得到完整的资讯内容，并展示在富文本编辑器中，再对图片进行渲染、保存并发布资讯。

本发明还提供了一种基于富文本编辑器的Word图片自动转存系统，包括：

转存规则和图片容器标识设定模块，用于将Word文档中的图文资讯复制到富文本编辑器中，设定富文本编辑器对于图文资讯的转存规则，按照转存规则设定所有图片容器的唯一标识；所述图文资讯包括图片、资讯内容和图片容器；所述转存规则用于资讯内容、图片容器及图片的一一对应；

标识设定模块，用于按照转存规则设定所有图片容器的唯一标识；

图片数组转化模块，用于根据从粘贴板中获取的图片的缓存地址找到图片位于计算机设备中的存储位置，将所有图片按照所述转存规则转为图片数组，并将图片数组以文件流的形式上传至后端服务器；

上传和压缩处理模块，用于对文件流形式的图片数组进行上传和压缩处理操作，将处理完成的图片存入到服务器和数据库中，并返回数据给前端；

对应和重组模块，用于基于JavaScript语言解析后端服务器返回的信息，遍历图片数组，根据转存规则和图片容器标识，将图片与图片容器进行对应和重组，得到完整的资讯内容。

可选地，所述转存规则如下：

D1={A1:B1,A2:B2,...,An:Bn}

D2={C1:B1,C2:B2,...,Cn:Bn}

D=D1+D2

其中，An为第n个资讯内容、Bn为第n个图片容器、Cn为第n个图片；D1为图片容器位于资讯内容中的位置；D2为图片和图片容器的对应关系；D为图片位于资讯中的位置。

根据本发明提供的具体实施例，本发明公开了以下技术效果：

本发明通过对Word文档中的复制的图文信息进行处理，设置全局转存规则，并将规则赋予内容、图片容器和图片，通过在粘贴板中获取的图片地址读取位于计算机的存储介质中的图片，将图片数组以文件流的形式传入后端服务器中，后端服务器对图片进行统一上传操作和压缩处理，将上传后的信息返回至前台，前端将后端服务器返回的图片信息进行解析并根据转存规则将图片和图片容器重组，再与内容进行结合，最终将完整的文章显示在富文本编辑器中。本发明解决了目前WEB网站中对于Word文档中的图片信息只能通过图片另存为至计算机本地，再上传至富文本编辑器内这种繁琐的方法进行操作，无法将Word文档中的图片信息直接复制到富文本编辑器中的问题，减少了维护人员不必要的重复性工作，同时提高了工作的效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例基于富文本编辑器的Word图片自动转存方法的流程图；

图2为本发明实施例基于富文本编辑器的Word图片自动转存方法的具体操作步骤。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明的目的是提供一种基于富文本编辑器的Word图片自动转存方法及系统，用以解决无法将Word文档中的图片信息直接复制到富文本编辑器中的问题，减少了维护人员不必要的重复性工作，同时提高了工作的效率。

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

本发明前端使用HTML+CSS+JS结合的方式开发，后端使用Java开发语言。如图1-图2所示，本发明提供的一种基于富文本编辑器的Word图片自动转存方法，包括以下步骤：

步骤1：将Word文档中的图文资讯复制到富文本编辑器中，设定富文本编辑器对于图文资讯的转存规则，按照转存规则设定所有图片容器的唯一标识；所述图文资讯包括图片、资讯内容和图片容器；其中该方法主要是针对图片的转存操作，资讯内容只提供一种占位功能；所述转存规则用于资讯内容、图片容器及图片的一一对应。

步骤2：根据从粘贴板中获取的图片的缓存地址找到图片位于计算机设备中的存储位置，将所有图片按照所述转存规则转为图片数组，并将图片数组以文件流的形式上传至后端服务器。

步骤3：后端服务器对文件流形式的图片数组进行上传和压缩处理操作，将处理完成的图片存入到服务器和数据库中，并返回数据给前端。

步骤4：前端用JavaScript语言解析后端服务器返回的信息，遍历图片数组，根据转存规则和图片容器标识，将图片与图片容器进行对应和重组，得到完整的资讯内容。

其中，步骤1中将Word文档中的图文资讯复制到富文本编辑器中，全局设定转存规则，具体规则如下：

D1={A1:B1,A2:B2,...,An:Bn}

D2={C1:B1,C2:B2,...,Cn:Bn}

D=D1+D2

其中，An为第n个资讯内容、Bn为第n个图片容器、Cn为第n个图片；D1表示图片容器位于资讯内容中的位置；D2表示图片和图片容器的对应关系；D表示图片位于资讯中的位置。该转存规则主要用于资讯内容(A)、图片容器(B)及图片(C)的一一对应。

使用JavaScript语言对于浏览器中的paste（粘贴）事件进行监听，通过属性clipboardData来获取粘贴板中的资讯内容、图片容器和图片，进一步给所有图片容器按照转存规则设置唯一标识。

其中，步骤2具体包括：

在步骤1的基础上，从粘贴板中通过clipboardData属性来获取图片的缓存地址，通过FileReader对象来读取图片缓存地址，由于在读取图片缓存地址的时候发现从不同版本的Word文档中复制的资讯内容，其中图片的名称存在不同，图片名称的不同导致后端服务器在执行图片上传方法时，无法正确获取图片名称，最终导致图片存储后无法正常显示在页面中，现使用readAsBinaryString方法统一将找到的图片读取为文件流，按照转存规则转为图片数组，将图片数组通过FormData函数模拟表单数据，同时FormData中需要设置基础的请求头信息，然后使用XMLHttpRequest.send(FormData)将模拟后的表单数据进行提交，将图片以文件流的形式和其他请求参数提交至后端服务器。

其中，步骤3具体包括：

后端服务器通过MultipartHttpServletRequest接收请求中的图片文件流和其他参数信息，传入图片上传方法中，在调取上传方法的过程中发现接收的图片的尺寸和大小都存在差异，不同尺寸的图片显示在编辑器中会影响资讯的整体性、美观性，为了使的最终发布的资讯格式比较统一、美观，则需要在将原始图片存储至服务器后，再对于图片进行压缩处理，根据默认设置的长宽尺寸对大小不一的图片进行resizeImage压缩，然后将调整好尺寸的图片与服务器上存储的临时图片进行替换，并返回数据给前端。

其中，步骤4具体包括：

前端用JavaScript语言将步骤3中返回的信息进行解析，遍历返回的JSON类型的图片数组，将数组中的每个图片元素按照转存规则与图片容器进行对应、重组，将图片和图片容器重组成img标签，然后将重组后的图片容器再次根据转存规则与资讯内容进行结合，最终将结合后的带有图片的资讯内容成功展示在富文本编辑器中，然后再对图片进行渲染最终保存并发布资讯。

本发明提供的上述方法解决了无法将Word文档中的图片信息直接复制到富文本编辑器中的问题，减少了维护人员不必要的重复性工作，同时提高了工作的效率。

本发明还提供了一种基于富文本编辑器的Word图片自动转存系统，包括：

转存规则和图片容器标识设定模块，用于将Word文档中的图文资讯复制到富文本编辑器中，设定富文本编辑器对于图文资讯的转存规则，按照转存规则设定所有图片容器的唯一标识；所述图文资讯包括图片、资讯内容和图片容器；所述转存规则用于资讯内容、图片容器及图片的一一对应；

标识设定模块，用于按照转存规则设定所有图片容器的唯一标识；

图片数组转化模块，用于根据从粘贴板中获取的图片的缓存地址找到图片位于计算机设备中的存储位置，将所有图片按照所述转存规则转为图片数组，并将图片数组以文件流的形式上传至后端服务器；

上传和压缩处理模块，用于对文件流形式的图片数组进行上传和压缩处理操作，将处理完成的图片存入到服务器和数据库中，并返回数据给前端；

对应和重组模块，用于基于JavaScript语言解析后端服务器返回的信息，遍历图片数组，根据转存规则和图片容器标识，将图片与图片容器进行对应和重组，得到完整的资讯内容。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的系统而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本发明的限制。

Claims (7)

1.一种基于富文本编辑器的Word图片自动转存方法，其特征在于，包括：

将Word文档中的图文资讯复制到富文本编辑器中，设定富文本编辑器对于图文资讯的转存规则，按照转存规则设定所有图片容器的唯一标识；所述图文资讯包括图片、资讯内容和图片容器；所述转存规则用于资讯内容、图片容器及图片的一一对应；

根据从粘贴板中获取的图片的缓存地址找到图片位于计算机设备中的存储位置，将所有图片按照所述转存规则转为图片数组，并将图片数组以文件流的形式上传至后端服务器；

后端服务器对文件流形式的图片数组进行上传和压缩处理操作，将处理完成的图片存入到服务器和数据库中，并返回数据给前端；

前端用JavaScript语言解析后端服务器返回的信息，遍历图片数组，根据转存规则和图片容器标识，将图片与图片容器进行对应和重组，得到完整的资讯内容。

2.根据权利要求1所述的基于富文本编辑器的Word图片自动转存方法，其特征在于，所述转存规则如下：

D1={A1:B1,A2:B2,...,An:Bn}

D2={C1:B1,C2:B2,...,Cn:Bn}

D=D1+D2

其中，An为第n个资讯内容、Bn为第n个图片容器、Cn为第n个图片；D1为图片容器位于资讯内容中的位置；D2为图片和图片容器的对应关系；D为图片位于资讯中的位置。

3.根据权利要求1所述的基于富文本编辑器的Word图片自动转存方法，其特征在于，所述将所有图片按照所述转存规则转为图片数组，并将图片数组以文件流的形式上传至后端服务器，具体包括：

将图片读取为文件流，按照转存规则转为图片数组，将图片数组通过FormData函数模拟表单数据，通过XMLHttpRequest对象的send方法进行表单提交操作，将图片以文件流的形式提交至后端服务器。

4.根据权利要求1所述的基于富文本编辑器的Word图片自动转存方法，其特征在于，后端服务器对文件流形式的图片数组进行上传和压缩处理操作，将处理完成的图片存入到服务器和数据库中，并返回数据给前端，具体包括：

根据默认设置的长宽尺寸对图片数组进行压缩处理，然后将压缩后的图片与服务器上存储的临时图片进行替换，并返回数据给前端。

5.根据权利要求1所述的基于富文本编辑器的Word图片自动转存方法，其特征在于，根据转存规则和图片容器标识，将图片与图片容器进行对应和重组，得到完整的资讯内容，具体包括：

将数组中的每个图片元素按照转存规则与图片容器进行对应和重组，将图片和图片容器重组成img标签，然后将重组后的图片容器再次根据转存规则与资讯内容进行结合，得到完整的资讯内容，并展示在富文本编辑器中，再对图片进行渲染、保存并发布资讯。

6.一种基于富文本编辑器的Word图片自动转存系统，其特征在于，包括：

转存规则和图片容器标识设定模块，用于将Word文档中的图文资讯复制到富文本编辑器中，设定富文本编辑器对于图文资讯的转存规则，按照转存规则设定所有图片容器的唯一标识；所述图文资讯包括图片、资讯内容和图片容器；所述转存规则用于资讯内容、图片容器及图片的一一对应；

标识设定模块，用于按照转存规则设定所有图片容器的唯一标识；

图片数组转化模块，用于根据从粘贴板中获取的图片的缓存地址找到图片位于计算机设备中的存储位置，将所有图片按照所述转存规则转为图片数组，并将图片数组以文件流的形式上传至后端服务器；

上传和压缩处理模块，用于对文件流形式的图片数组进行上传和压缩处理操作，将处理完成的图片存入到服务器和数据库中，并返回数据给前端；

对应和重组模块，用于基于JavaScript语言解析后端服务器返回的信息，遍历图片数组，根据转存规则和图片容器标识，将图片与图片容器进行对应和重组，得到完整的资讯内容。

7.根据权利要求6所述的基于富文本编辑器的Word图片自动转存系统，其特征在于，所述转存规则如下：

D1={A1:B1,A2:B2,...,An:Bn}

D2={C1:B1,C2:B2,...,Cn:Bn}

D=D1+D2

其中，An为第n个资讯内容、Bn为第n个图片容器、Cn为第n个图片；D1为图片容器位于资讯内容中的位置；D2为图片和图片容器的对应关系；D为图片位于资讯中的位置。

Images