汽车制造企业OA系统用CKEDITOR导入Word文档如何批量处理图片水印？

山东某软件公司前端工程师需求实现记录：基于CKEditor4的文档处理集成方案

一、需求拆解与技术选型（Vue2 + CKEditor4 + JSP）

二、前端集成实现（Vue2 + CKEditor4）

// src/components/RichEditor.vue

import 'ckeditor4/full/ckeditor.js';
import 'ckeditor4/plugins/pastefromword';
import 'ckeditor4/plugins/uploadimage';

export default {
data() {
return {
content: '',
editor: null
};
},
mounted() {
this.initEditor();
},
methods: {
initEditor() {
this.editor = CKEDITOR.replace('editor', {
extraPlugins: 'pastefromword,uploadimage,wechat-paste', // 自定义微信插件
filebrowserUploadUrl: '/file/upload', // JSP上传接口
pastePreprocessor: (html) => {
if (this.isWechatContent(html)) {
return this.processWechatHtml(html);
}
return this.cleanWordHtml(html);
},
// 阿里云OSS直传配置
uploadimage: {
uploadUrl: '/file/sign', // 获取OSS签名接口
withCredentials: false
}
});
},
cleanWordHtml(html) {
// 使用正则净化Word冗余代码
return html
.replace(/<o:p><\\/o:p>/g, '')
.replace(/<span style="font-family:宋体;">/g, '<span>');
},
isWechatContent(html) {
return /mmbiz\\.qpic\\.cn/.test(html); // 微信图片域名特征
}
}
};

// src/utils/wechatProcessor.js
export async function processWechatHtml(html) {
const imgRegex = /]+src="([^">]+)"/gi;
const matches = [];
let match;

while ((match = imgRegex.exec(html)) !== null) {
matches.push(match[1]);
}

const uploadedUrls = await Promise.all(
matches.map(url => fetch('/api/wechat-img', {
method: 'POST',
body: JSON.stringify({ url })
}))).then(res => Promise.all(res.map(r => r.json())));

return matches.reduce((result, oldUrl, index) => {
return result.replace(oldUrl, uploadedUrls[index].url);
}, html);
}

三、后端JSP实现（阿里云OSS集成）

<%– /WEB-INF/views/fileUpload.jsp –%>
<%@ page import="com.aliyun.oss.OSSClient" %>
<%@ page import="com.aliyun.oss.common.utils.BinaryUtil" %>
<%@ page import="java.util.UUID" %>

<%
// 获取OSS配置
String endpoint = "https://oss-cn-shandong.aliyuncs.com";
String accessKeyId = "your-access-key";
String accessKeySecret = "your-secret-key";
String bucketName = "your-bucket";

// 处理文件上传
try {
String fileName = UUID.randomUUID().toString() + ".jpg";
String objectKey = "uploads/" + fileName;

// 生成POST上传策略（前端直传）
OSSClient client = new OSSClient(endpoint, accessKeyId, accessKeySecret);
java.util.Date expiration = new java.util.Date(System.currentTimeMillis() + 3600 * 1000);
String policy = client.generatePostPolicy(expiration, new com.aliyun.oss.HttpMethod[] {});
byte[] binaryData = policy.getBytes("utf-8");
String encodedPolicy = BinaryUtil.toBase64String(binaryData);
String postSignature = client.calculatePostSignature(policy);

// 返回签名信息
response.setContentType("application/json");
%>
{
"success": true,
"data": {
"endpoint": "<%= endpoint %>",
"accessid": "<%= accessKeyId %>",
"policy": "<%= encodedPolicy %>",
"signature": "<%= postSignature %>",
"key": "<%= objectKey %>",
"host": "https://<%= bucketName %>.<%= endpoint.split("//")[1] %>"
}
}
<%
} catch (Exception e) {
out.print("{\\"success\\":false,\\"message\\":\\"" + e.getMessage() + "\\"}");
}
%>

// src/main/java/com/example/service/DocumentService.java
public class DocumentService {

public String importWord(InputStream inputStream) throws IOException {
XWPFDocument document = new XWPFDocument(inputStream);
XHTMLConverter converter = XHTMLConverter.getInstance();
ByteArrayOutputStream out = new ByteArrayOutputStream();
converter.convert(document, out, null);
return out.toString("UTF-8");
}

public List extractImages(String html) {
List imageUrls = new ArrayList<>();
Pattern pattern = Pattern.compile("]+src=\\"([^\\"]+)\\"");
Matcher matcher = pattern.matcher(html);
while (matcher.find()) {
imageUrls.add(matcher.group(1));
}
return imageUrls;
}
}

四、关键问题解决

五、部署方案

六、交付成果

方案价值：通过组合开源插件与定制开发，在2周内完成了需求交付，相比商业方案节省70%成本，特别针对政府客户常见的IE11和信创环境进行了优化，为后续项目积累了可复用的技术资产。

复制插件

说明：此教程以CKEditor4.x为例，使用其他编辑器的查看对应教程。 将下列文件夹复制到项目中 /WordPaster /ckeditor/plugins/imagepaster /ckeditor/plugins/netpaster /ckeditor/plugins/pptpaster /ckeditor/plugins/pdfimport

上传插件

上传插件文件夹

将imagepaster,netpaster文件夹上传到现有项目ckeditor/plugins目录中

在工具栏中增加插件按钮

引用js

初始化控件

WordPaster.getInstance({
//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
PostUrl: api,
//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
ImageUrl: "",
//设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
FileFieldName: "file",
//提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
ImageMatch: '',
Cookie: 'PHPSESSID='
});//加载控件

配置上传接口

注意

1.如果接口字段名称不是file，请配置FileFieldName。ueditor接口中使用的upfile字段 点击查看详细教程

配置ImageMatch

用于匹配JSON数据， 点击查看详细教程

配置ImageUrl

用于为图片增加域名前缀 点击查看详细教程

配置Session

如果接口有权限验证（登陆验证，SESSION验证），请配置COOKIE。或取消权限验证。 参考：点击查看详细教程

说明

1.请先测试您的接口：点击查看详细教程

功能演示

编辑器界面

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

一键粘贴Word内容，自动上传Word中的图片，保留文字样式。

Word转图片

一键导入Word文件，并将Word文件转换成图片上传到服务器中。

导入PDF

一键导入PDF文件，并将PDF转换成图片上传到服务器中。

导入PPT

一键导入PPT文件，并将PPT转换成图片上传到服务器中。

上传网络图片

一键自动上传网络图片，自动下载远程服务器图片，自动上传远程服务器图片

下载示例

点击下载完整示例