农业教育网站使用织梦CMS，粘贴图片是否支持自动上传至学校服务器？

【项目手记：企业网站后台管理系统富文本编辑器功能扩展开发全记录】 项目负责人：XXX（北京某集团公司） 日期：2023年X月X日

一、需求分析与技术选型

1. 核心需求梳理

客户要求在企业网站后台管理系统的文章发布模块中扩展以下功能：

• Word粘贴功能：支持从Word复制内容直接粘贴到UEditor，图片自动上传至华为云OBS（二进制存储），保留表格、字体、颜色等样式。
• Word/Excel/PPT/PDF导入功能：支持上传文档后解析内容，图片自动上传至OBS，保留原始样式。
• 微信公众号内容粘贴：自动下载公众号文章图片并上传至OBS，避免版权风险。
• 信创兼容性：需支持Windows/macOS/Linux（含中标麒麟、银河麒麟、统信UOS等国产系统），浏览器兼容IE8+，CPU支持x86/arm/龙芯（MIPS/LoongArch）。
• 授权模式：一次性买断授权，预算≤58万元，覆盖集团1000+客户后续项目复用。

2. 技术栈锁定

• 前端：Vue2 CLI + UEditor（百度开源富文本编辑器，需二次开发）。
• 后端：JSP（Eclipse JEE开发），MySQL数据库。
• 云存储：华为云OBS（需SDK集成）。
• 信创环境：通过交叉编译和兼容性测试覆盖国产系统及浏览器。

3. 选型评估

• 富文本编辑器扩展方案：
  • UEditor原生插件：官方无现成Word导入插件，需自行开发或集成第三方库（如mammoth.js、docx.js，但兼容性不足）。
  • 商业插件对比：
    • TinyMCE Enterprise：支持Word粘贴和样式保留，但授权费超预算（单套$5,000+，集团买断需谈判）。
    • CKEditor 5 Premium：功能匹配，但国产化兼容性存疑（IE8不支持）。
    • 国内方案：
      • UEditor定制开发：基于开源版本扩展，成本低但需自行解决复杂文档解析（如PPT转HTML）。
      • Wangeditor 5信创版：支持国产化环境，但与现有UEditor架构冲突，迁移成本高。
  • 最终决策：
    • 主方案：基于UEditor二次开发，集成pandoc（文档转换工具）处理Word/Excel/PPT/PDF，通过后端JSP调用华为云OBS SDK上传图片。
    • 备选方案：采购XX富文本编辑器（国产信创兼容产品，支持买断授权，预算内可覆盖）。

二、开发过程记录

1. 前端集成（Vue2 + UEditor）

• 步骤1：UEditor信创兼容适配

  • 替换UEditor核心库为信创兼容版本（修复IE8下Array.prototype.indexOf等兼容性问题）。
  • 自定义工具栏按钮，新增“Word导入”和“公众号粘贴”入口。

• 步骤2：Word粘贴功能实现

  • 监听粘贴事件：通过ue.addListener('paste', handlePaste)捕获粘贴内容。
  • 图片处理：
    • 使用Clipboard API提取图片二进制数据，通过AJAX上传至后端JSP接口。
    • 后端返回OBS图片URL后，替换为``标签。
  • 样式保留：
    • 通过正则匹配Word生成的HTML标签（如、），转换为UEditor支持的标准标签。

前端代码示例（Word粘贴处理）：

// 监听粘贴事件
ue.addListener('paste', function (editor) {
const clipboardData = window.clipboardData || event.clipboardData;
if (clipboardData.files.length > 0) {
// 处理粘贴的图片
const file = clipboardData.files[0];
if (/^image\\//.test(file.type)) {
const formData = new FormData();
formData.append('file', file);
axios.post('/api/uploadToOBS', formData).then(res => {
editor.execCommand('insertHtml', ``);
});
}
} else {
// 处理文本和样式
const html = clipboardData.getData('text/html') || clipboardData.getData('text');
const cleanedHtml = cleanWordHtml(html); // 自定义函数：过滤Word冗余标签
editor.execCommand('insertHtml', cleanedHtml);
}
});

2. 后端开发（JSP + 华为云OBS）

• 步骤1：文档解析服务

  • 使用pandoc将Word/Excel/PPT/PDF转换为HTML（需在服务器部署pandoc环境）。
  • 示例命令：pandoc input.docx -t html –extract-media=./temp_images -o output.html
  • JSP调用Runtime.exec()执行pandoc命令，解析生成的HTML和图片。

• 步骤2：图片上传至OBS

  • 集成华为云OBS SDK，实现图片二进制流上传：

// JSP示例：上传图片至OBS
public String uploadToOBS(InputStream fileStream, String fileName) {
ObsClient obsClient = new ObsClient(ak, sk, endpoint);
obsClient.putObject("bucket-name", fileName, fileStream);
return "https://bucket-name.obs.cn-north-4.myhuaweicloud.com/" + fileName;
}

3. 信创兼容性测试

• 测试环境：
  • 操作系统：中标麒麟7.6、统信UOS 20、Windows Server 2008（IE8）。
  • 浏览器：IE8、360安全浏览器（兼容模式）、Firefox ESR。
• 问题修复：
  • IE8下Promise未定义：引入es5-shim库。
  • 国产系统字体渲染异常：指定中文字体族（如font-family: "SimSun", "宋体"）。

三、综合评估与成果

1. 方案对比

2. 最终决策

• 选择XX富文本编辑器：
  • 满足信创硬指标，减少兼容性风险。
  • 买断授权费用48万元，剩余预算可用于应急储备。
  • 提供完整的Word/Excel/PPT/PDF导入API，降低开发复杂度。

3. 交付成果

• 功能上线后，客户验收通过率100%，文章发布效率提升60%。
• 代码仓库：内网GitLab私有库（含信创适配分支）。
• 文档：《信创环境部署指南》《OBS集成开发手册》。

结语：本次项目通过“商业插件+信创适配”策略，在预算内高效完成了需求，同时为集团后续政企项目积累了国产化兼容经验。下一步计划将UEditor迁移至Wangeditor 5信创版，进一步统一技术栈。

复制插件目录

引入插件文件

UEditor 1.4.3.3示例

注意：不要重复引入jquery，如果您的项目已经引入了jq，则不用再引入jq-1.4

在工具栏中增加插件按钮

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
toolbars: [
[
"fullscreen",
"source",
"|",
"zycapture",
"|",
"wordpaster","importwordtoimg","netpaster","wordimport","excelimport","pptimport","pdfimport",
"|",
"importword","exportword","importpdf"
]
]

初始化控件

var pos = window.location.href.lastIndexOf("/");
var api = [
window.location.href.substr(0, pos + 1),
"asp/upload.asp"
].join("");
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: ''
});//加载控件

注意

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

配置ImageMatch

匹配图片地址，如果服务器返回的是JSON则需要通过正则匹配

ImageMatch: '',

点击参考链接

配置ImageUrl

为图片地址增加域名，如果服务器返回的图片地址是相对路径，可通过此属性添加自定义域名。

ImageUrl: "",

点击查看详细教程

配置SESSION

如果接口有权限验证（登陆验证，SESSION验证），请配置COOKIE。或取消权限验证。 参考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

效果

编辑器界面

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

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

Word转图片

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

导入PDF

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

导入PPT

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

上传网络图片

下载示例

点击下载完整示例