TinyMCE html编辑器导入word，图文内容如何完整呈现？

于 2025-07-27 10:59:05 发布
阅读量757 收藏 24
点赞数 26
CC 4.0 BY-SA版权
文章标签： html 编辑器 word umeditor粘贴word ueditor粘贴word ueditor复制word ueditor上传word图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45525177/article/details/149686273

作为陕西某软件公司的一名前端工程师，近期我接到了一个关键需求：需在企业网站的后台管理系统文章发布模块中，集成Word粘贴、Word文档导入及微信公众号内容粘贴（含自动下载并上传公众号文章图片至服务器）的功能。这一需求旨在通过Web编辑器工具栏新增插件实现，要求集成便捷、不影响现有系统功能，且用户操作需简单直观。以下是我从需求分析、产品评估到开发实现的全过程记录。

一、需求分析与产品评估

需求梳理：

  1. Word粘贴功能：支持从Word复制内容并粘贴至编辑器，图片自动上传至服务器（初期本地存储，后期迁移至阿里云/华为云OBS/腾讯云等对象存储），保留文档样式（表格、字体、颜色等）。
  2. 微信公众号内容粘贴：自动解析公众号文章中的图片并上传至服务器，避免使用BASE64编码（因质量低且增加HTML体积）。
  3. 文档导入功能：支持Word、Excel、PPT、PDF导入，保留图片和样式。
  4. 技术约束：前端基于vue2-cli + TinyMCE，后端SpringBoot，开发工具IntelliJ IDEA，数据库MySQL，服务器阿里云。

产品评估：

  • TinyMCE插件生态：TinyMCE虽有官方paste插件，但无法满足图片自动上传和样式保留需求，需定制开发。
  • 第三方库对比：
    • Mammoth.js：适合Word文档解析，但需扩展图片上传逻辑。
    • Docx.js/PDF.js：分别用于Word/PDF解析，但集成复杂度高。
    • 自定义解决方案：结合TinyMCE API和后端服务，实现灵活控制。

结论：采用自定义开发方案，基于TinyMCE扩展插件，结合后端SpringBoot服务处理图片上传和文档解析。

二、开发过程

1. 前端插件开发（TinyMCE扩展）

步骤：

  1. 注册插件：在TinyMCE初始化配置中添加自定义插件。
  2. 监听粘贴事件：拦截粘贴内容，提取图片和HTML。
  3. 图片上传：通过FormData将图片二进制数据发送至后端。
  4. 样式保留：使用cleanHtml方法过滤冗余标签，保留核心样式。

代码示例（前端插件核心逻辑）：

// plugins/customPaste/plugin.js
tinymce.PluginManager.add('customPaste', function (editor) {
  editor.on('paste', function (e) {
    const clipboardData = e.clipboardData || window.clipboardData;
    const items = clipboardData.items;

    // 处理图片上传
    for (let i = 0; i < items.length; i++) {
      if (items[i].type.indexOf('image') !== -1) {
        const file = items[i].getAsFile();
        uploadImage(file).then(url => {
          // 替换图片URL为服务器地址
          const html = editor.getContent({ format: 'html' });
          editor.setContent(html.replace(/src="data:image\/[^;]+;base64,/g, `src="${url}`));
        });
      }
    }

    // 保留Word样式（简化版）
    const html = clipboardData.getData('text/html');
    const cleanedHtml = cleanWordHtml(html); // 自定义方法过滤冗余标签
    editor.insertContent(cleanedHtml);
  });

  function uploadImage(file) {
    const formData = new FormData();
    formData.append('file', file);
    return fetch('/api/upload', { method: 'POST', body: formData })
      .then(res => res.json())
      .then(data => data.url);
  }
});
2. 后端服务开发（SpringBoot）

功能：

  1. 图片上传接口：接收二进制文件，存储至本地或对象存储（如阿里云OSS）。
  2. 文档解析接口：调用Mammoth.js/Apache POI解析Word/Excel，返回HTML和图片列表。

代码示例（图片上传接口）：

// Controller层
@RestController
@RequestMapping("/api")
public class FileUploadController {

    @PostMapping("/upload")
    public ResponseEntity> uploadFile(@RequestParam("file") MultipartFile file) {
        try {
            // 保存至本地（示例）
            String filePath = "/uploads/" + UUID.randomUUID() + ".png";
            file.transferTo(new File(filePath));

            // 返回URL（实际项目需替换为对象存储URL）
            Map response = new HashMap<>();
            response.put("url", "https://your-domain.com" + filePath);
            return ResponseEntity.ok(response);
        } catch (Exception e) {
            return ResponseEntity.status(500).build();
        }
    }
}

文档解析示例（使用Mammoth.js）：

// 服务层（简化版）
public String convertDocxToHtml(MultipartFile file) throws IOException {
    ByteArrayInputStream stream = new ByteArrayInputStream(file.getBytes());
    Mammoth.Result result = Mammoth.convertToHtml(stream);
    return result.getValue(); // 返回HTML字符串
}
3. 集成与测试
  1. TinyMCE配置：在vue2-cli项目中注册插件。
// main.js
import 'tinymce/plugins/customPaste'; // 引入自定义插件

Vue.prototype.$tinymce.init({
  selector: '#editor',
  plugins: 'customPaste', // 启用插件
  toolbar: 'customPasteButton', // 添加工具栏按钮
});
  1. 功能测试：
    • 验证Word粘贴是否保留样式和图片。
    • 检查微信公众号图片是否自动上传。
    • 测试多格式文档导入（Word/PDF等）。

三、总结与优化

  1. 性能优化：

    • 图片上传采用异步队列，避免阻塞主线程。
    • 对大文件分片上传，提升稳定性。

  2. 扩展性：

    • 抽象图片存储层，支持多云厂商切换。
    • 文档解析服务独立部署，减轻主应用负载。

  3. 安全性：

    • 限制上传文件类型和大小。
    • 对用户输入进行XSS过滤。

通过此次开发，我们成功实现了客户需求，且代码结构清晰，便于后期维护和扩展。

复制插件

image

安装jquery

npm install jquery

在组件中引入

  // 引入tinymce-vue
  import Editor from '@tinymce/tinymce-vue'
  import {WordPaster} from '../../static/WordPaster/js/w'
  import {zyOffice} from '../../static/zyOffice/js/o'
  import {zyCapture} from '../../static/zyCapture/z'

添加工具栏

//添加导入excel工具栏按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor).importExcel()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('excelimport', {
        text: '',
        tooltip: '导入Excel文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('excelimport', {
        text: '',
        tooltip: '导入Excel文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('excelimport', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加word转图片工具栏按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().importWordToImg()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('importwordtoimg', {
        text: '',
        tooltip: 'Word转图片',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('importwordtoimg', {
        text: '',
        tooltip: 'Word转图片',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('importwordtoimg', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加粘贴网络图片工具栏按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().UploadNetImg()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('netpaster', {
        text: '',
        tooltip: '网络图片一键上传',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('netpaster', {
        text: '',
        tooltip: '网络图片一键上传',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('netpaster', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加导入PDF按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().ImportPDF()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('pdfimport', {
        text: '',
        tooltip: '导入pdf文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('pdfimport', {
        text: '',
        tooltip: '导入pdf文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('pdfimport', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加导入PPT按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().importPPT()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('pptimport', {
        text: '',
        tooltip: '导入PowerPoint文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('pptimport', {
        text: '',
        tooltip: '导入PowerPoint文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('pptimport', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加导入WORD按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    function selectLocalImages(editor) {        
      WordPaster.getInstance().SetEditor(editor).importWord()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('wordimport', {
        text: '',
        tooltip: '导入Word文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('wordimport', {
        text: '',
        tooltip: '导入Word文档',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('wordimport', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

//添加WORD粘贴按钮
(function () {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
    var ico = "http://localhost:8080/static/WordPaster/plugin/word.png"
    function selectLocalImages(editor) {
      WordPaster.getInstance().SetEditor(editor).PasteManual()
    }

    var register$1 = function (editor) {
      editor.ui.registry.addButton('wordpaster', {
        text: '',
        tooltip: 'Word一键粘贴',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
      editor.ui.registry.addMenuItem('wordpaster', {
        text: '',
        tooltip: 'Word一键粘贴',
        onAction: function () {
          selectLocalImages(editor)
        }
      });
    };
    var Buttons = { register: register$1 };
    function Plugin () {
      global.add('wordpaster', function (editor) {        
        Buttons.register(editor);
      });
    }
    Plugin();
}());

在线代码：

添加插件

// 插件
      plugins: {
          type: [String, Array],
          // default: 'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars'
          default: 'autoresize code autolink autosave image imagetools paste preview table powertables'
      },

点击查看在线代码

初始化组件

// 初始化
WordPaster.getInstance({
    // 上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
    PostUrl: 'http://localhost:8891/upload.aspx',
    // 为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
    ImageUrl: 'http://localhost:8891{url}',
    // 设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
    FileFieldName: 'file',
    // 提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
    ImageMatch: ''
})

在页面中引入组件

功能演示

编辑器

在编辑器中增加功能按钮
image

导入Word文档,支持doc,docx

粘贴Word和图片

导入Excel文档,支持xls,xlsx

粘贴Word和图片

粘贴Word

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

Word转图片

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

导入PDF

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

导入PPT

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

上传网络图片

一键自动上传网络图片。
自动上传网络图片

下载示例

点击下载完整示例

M_Snow
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值