xhEditor导入word文档自动上传图片

最新推荐文章于 2026-08-19 12:52:56 发布

原创最新推荐文章于 2026-08-19 12:52:56 发布 · 571 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

作为一名山西PHP程序员的外包奇遇记

大家好！我是来自山西的一名PHP程序员，最近刚接了个CMS企业官网的外包项目，客户突然甩来个"豪华套餐"需求——要在后台编辑器里加一堆高大上的文档导入功能。

客户需求大揭秘

客户要求：

Word一键粘贴（高龄用户福音）
支持Word/Excel/PPT/PDF导入（保留所有花里胡哨的样式）
LaTeX公式自动转MathML（数学老师狂喜）
微信公众号内容导入（新媒体小编必备）
图片自动上传到阿里云OSS（省心省力）

预算？680元！你没看错，不是6800，不是68000，就是680！这价格让我想起了我们山西的特色——刀削面，量大实惠！

技术选型血泪史

我评估了一圈开源产品，发现它们对emz/wmz格式公式图片的支持，就像我对女朋友的心思一样——完全猜不透！LaTeX公式支持？不存在的！

前端：Vue3 CLI + xhEditor
后端：PHP（Zend Studio开发）
数据库：MySQL
服务器：阿里云ECS + OSS

解决方案：自己动手丰衣足食

既然现成的都不行，那就自己撸一个插件吧！下面分享部分代码：

前端部分 (Vue3)

// Word粘贴组件
const handleWordPaste = (e) => {
  const items = (e.clipboardData || window.clipboardData).items;
  let blob = null;
  
  for (let i = 0; i < items.length; i++) {
    if (items[i].type.indexOf('text/html') !== -1) {
      blob = items[i].getAsFile();
      break;
    }
  }
  
  if (blob) {
    const reader = new FileReader();
    reader.onload = function(event) {
      const wordContent = event.target.result;
      // 转换Word格式为HTML
      convertWordToHtml(wordContent).then(html => {
        editor.insertContent(html);
      });
    };
    reader.readAsText(blob);
  }
};

// LaTeX转MathML
const latexToMathML = (latex) => {
  // 这里可以使用MathJax或KaTeX库
  return katex.renderToString(latex, {
    throwOnError: false,
    output: 'mathml'
  });
};

后端部分 (PHP)

]+src="([^">]+)"/', $html, $matches);
    foreach ($matches[1] as $imgSrc) {
        if (strpos($imgSrc, 'data:image') === 0) {
            // 处理base64图片
            $ossUrl = uploadBase64ImageToOSS($imgSrc);
            $html = str_replace($imgSrc, $ossUrl, $html);
        }
    }
    return $html;
}
?>