【Word页面编辑---Chrome 浏览器插件】

**

Word页面编辑—Chrome 浏览器插件

**

前言

目前基于Web页面的富文本编辑器有Ueditor、CKEditor等前端编辑器；这些编辑器具有小巧灵活，使用方便的特点。但是这种前端编辑器同时也存在很大的局限性，首先功能过于简单，对于文档格式的控制也不方便；对于大多数用户而言Word这种办公编辑软件自然是首选的编辑工具。但是用户在Word中编辑好的文档，一旦拷贝到前端编辑器中会产生各种意向不到的格式偏差，而在前端编辑器中再次调整好一个满意的格式也是殊为不易的。因此怎么让用户在Web中编辑Word文档，并且100%无缝的转换成Html页面是一个急需解决的技术问题。
以下面“图一”为例，这是一个用Word编辑好格式的文档。

图一：word文档原件
我们将此文档的内容拷贝到Ueditor编辑器中会发现此时文件内容格式出现了变化。
1.“考生须知”的居中框，变成右对齐。
2.“选择题”中的答案图像未能拷贝成功，变成白图。
具体请参考“图2”。

图二：UEditor编辑器中的文档

本插件的功能特点

根据前面所述，为了解决此类问题，我们开发了一个基于Chrome内核的浏览器插件。用户可以基于此插件在Web中编辑Word文档，并且将编辑好的文档以Html页面格式文件的形式保存至应用服务器中；这样就可以完美的解决此类应用问题。
以图3为例，用户将原文档内容拷贝到插件编辑器中，继续使用Word工具进行编辑操作，完成后保存并上传至服务器中。
在服务器页面列表中打开上传后的html页面，以图5为例可以看到形成的Html页面完美的还原了Word文档的原始内容，格式上无任何偏差。
在图4的示例页面上可以看到插件目前有：
“添加”功能：可以打开控件编辑一个空白的新文档，并可保存至服务器。
“编辑”功能：可以重新编辑之前保存过的文档，再次编辑后上传回服务器中。

图3：在插件中拷贝原文档内容

图4：上传服务器后—展示页面列表

图5：上传至服务器后的html内容页面

关于插件开发：

使用环境：

客户端环境：Windows+Chrome内核浏览器（88版本及以上）。
服务器端环境：Http服务器；Java、PHP、IIS服务器均可。

插件接口JS-API：

1. 创建页面接口：用于创建一个新的空白文档页面。
   openControl(uploadUrl,userParam,inputFileName,session)
   
   参数说明:
   uploadUrl:用于接收上传文件的接口URL。
   userParam:用户自定义参数列表，Json格式，在调用上传文件接口时返回给接口。
   inputFileName:页面上传文件对象的名称。后端接口程序会根据此对象名称找到接收的文件对象。

session:页面会话信息。sessionType=”1”代表会话通过cookie传递，sessionType=”2”代表会话通过url参数传递；sessionName=会话cookie名称或会话参数名称；sessionId：会话ID值。
2. 编辑页面接口：
editControl(downloadUrl,uploadUrl,userParam,inputFileName,session)

downloadUrl:需要编辑的文件（.docx文件）下载地址。
其他接口参数与openControl相同。
3. 上传页面回调接口：页面保存到服务器后的回调接口。

作者联系方式

微信号：zhangcz75