在CKEDITOR中如何实现Word图片粘贴后的自动上传服务器功能(JS版)？

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

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

1. 核心功能确认：

   • 编辑器增强需求：
     • Word粘贴净化（保留核心样式，去除冗余代码）
     • 多格式文档导入（DOCX/XLSX/PPTX/PDF转HTML）
     • 微信图文抓取（图片下载+阿里云OSS上传）
   • 技术约束：
     • 前端：Vue2 CLI（需兼容IE11）
     • 后端：JSP（Servlet 3.0+）
     • 存储：阿里云OSS（直传模式）

2. 插件选型评估：

   插件方案	优势	适配成本	授权费用
   CKEditor4官方插件	天然兼容，文档完善	低	$1,200
   最终选择	CKEditor4 + 第三方插件组合	中	$850

   • 具体插件组合：
     • pastefromword（官方净化粘贴）
     • uploadimage（图片上传）
     • docx-converter（文档转换，需二次开发）
     • 微信内容处理模块（自研）

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

1. 编辑器初始化配置：

// 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); // 微信图片域名特征
    }
  }
};

2. 微信内容处理模块：

// 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集成）

1. 图片上传接口：

<%-- /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() + "\"}");
}
%>

2. 文档导入服务（Apache POI集成）：

// 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;
    }
}

四、关键问题解决

1. 跨域问题处理：

   • 前端配置：

     // vue.config.js
     module.exports = {
       devServer: {
         proxy: {
           '/api': {
             target: 'http://localhost:8080',
             changeOrigin: true
           }
         }
       }
     };
     

   • 后端配置（Tomcat）：

     
     
       CorsFilter
       org.apache.catalina.filters.CorsFilter
       
         cors.allowed.origins
         *
       
     
     

2. IE11兼容性处理：

   • 添加polyfill：

     npm install --save-dev @babel/polyfill core-js
     

   • 修改babel配置：

     // babel.config.js
     module.exports = {
       presets: [
         ['@vue/cli-plugin-babel/preset', {
           useBuiltIns: 'entry',
           corejs: 3
         }]
       ]
     };
     

五、部署方案

1. 阿里云部署架构：

   [用户浏览器] → [CDN加速] → [SLB负载均衡] 
     ↓                         ↓
   [Vue前端(Nginx)]       [JSP后端(Tomcat)]
     ↓                         ↓
   [OSS存储]             [MySQL RDS]
   

2. 性能优化措施：

   • 图片处理：
     • 使用OSS图片处理（?x-oss-process=image/resize,w_800）
     • 启用CDN缓存（TTL=1年）
   • 文档转换：
     • 使用线程池处理大文件（Tomcat配置：``）

六、交付成果

1. 前端包：

   • 编译后的Vue组件（UMD格式）
   • CKEditor4定制版本（含插件）
   • 微信内容处理工具库

2. 后端包：

   • JSP接口代码（Maven项目）
   • Apache POI文档处理模块
   • OSS集成工具类

3. 文档：

   • 集成指南（含IE11注意事项）
   • 接口文档（Swagger格式）
   • 测试用例（覆盖Word/Excel/微信等场景）

方案价值：通过组合开源插件与定制开发，在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转换成图片上传到服务器中。

上传网络图片

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

下载示例

点击下载完整示例