ueditor 富文本编辑器上传word图片

问题背景

因为网页不能直接访问本地文件。因此，上传word图片只能通过activeX插件，或者是本地客户端上传。

本文章将详细介绍如何通过本地客户端与浏览器交互，实现Word文档图片的上传功能。

解决思路

1. 研发本地客户端

开发一个本地客户端，功能用于解析Word文档，上传Word中的图片，上传Word的内容。

2. 浏览器调用本地客户端

本地客户端能被浏览器调用，并且能传参数（参数用于识别是哪个浏览器用户上传Word，能够正确的回显到浏览器窗口）。

为了达到这个目的，使用系统注册表功能。现在新的系统，可以通过 app:// 等跳转链接直接打开应用程序，于是利用它，作为浏览器和程序交互的入口。

3. 修改富文本编辑器

用户调用exe程序，传输id，该id用于回显到浏览器使用。前端有个定时器，一直轮询该id是否已上传成功。上传成功，提取id的内容，填充到富文本框。

本文以 ueditor 作为演示。

---

插件使用

本作者已完成一个插件，可以直接使用：

上述文件解压后得到的exe文件，直接安装。目前只支持Windows，别的平台可类似参考。

参数说明

该exe接收的参数格式如下：

YKHtmlApp://open?id=id关键词&uploadFile=上传文件的路径&upload=上传word内容的路径

参数说明：

• id：用于标识是哪个浏览器用户，确保内容回显到正确的浏览器窗口
• uploadFile：上传Word文件的路径
• upload：上传Word内容的路径

---

前端实现

添加自定义按钮

在ueditor中添加一个自定义的按钮，用于提交：

生成唯一ID

在点击后，生成独立的id，保存到缓存中，并且开始轮询该id，是否已上传word。然后通过 window.location.href 打开应用程序：

// 生成唯一ID
var uniqueId = generateUniqueId();

// 保存到缓存
localStorage.setItem('uploadId', uniqueId);

// 开始轮询
startPolling(uniqueId);

// 打开本地应用
window.location.href = 'YKHtmlApp://open?id=' + uniqueId + 
                       '&uploadFile=' + filePath + 
                       '&upload=' + contentPath;

选择并上传Word

选择需要的Word文档，点击上传：

成功后，即可回显到富文本编辑器中。

---

后端接口设计

后端需要四个接口：

1. 上传图片接口
   用于上传图片，可以根据id识别是哪个浏览器上传的
2. 上传Word内容接口
   用于上传Word内容，可以根据id来保存内容到相应的缓存
3. 轮询id的接口
   前端轮询id，如果成功，并且返回Word内容
4. 创建id的接口
   这个是最重要的，因为这个id每点击一次创建一次，这个是判断上传成功后，回显到哪个人的浏览器

可以按需求设计，接口只有Java版本，并且就四个简单的接口，没有什么复杂的调用。其他可根据需要设计。主要复杂在于前端和exe软件的设计。

---

Ueditor关键代码

以下是ueditor的关键代码示例：

在 130686行 左右可以看到关键逻辑代码，可自行修改：

// 关键逻辑代码位置：约130686行
// 自定义按钮注册
UE.registerUI('wordupload', function(editor, uiName) {
    // 创建按钮
    var btn = new UE.ui.Button({
        name: uiName,
        title: '上传Word文档',
        onclick: function() {
            // 生成唯一ID
            var uploadId = generateUploadId();
            
            // 开始轮询
            startPolling(uploadId);
            
            // 打开本地应用
            openLocalApp(uploadId);
        }
    });
    
    return btn;
});

// 轮询机制
function startPolling(uploadId) {
    var pollInterval = setInterval(function() {
        $.ajax({
            url: '/api/checkUpload',
            data: { id: uploadId },
            success: function(response) {
                if (response.success) {
                    clearInterval(pollInterval);
                    // 填充内容到编辑器
                    editor.setContent(response.content);
                }
            }
        });
    }, 1000); // 每秒轮询一次
}

---

总结

通过本地客户端与浏览器的配合，我们成功实现了Word文档图片的上传功能。这种方案的优点在于：

• ✅ 突破了浏览器无法直接访问本地文件的限制
• ✅ 利用系统注册表实现浏览器与本地应用的通信
• ✅ 通过唯一ID确保内容正确回显到对应的浏览器窗口
• ✅ 前端轮询机制保证上传状态的实时反馈

如果您在使用过程中遇到任何问题，欢迎通过我们的联系方式与我们取得联系。