【技术宅の毕业求生指南】CMS系统Word一键转存功能开发实录（附代码+红包群安利）

背景

作为新疆某高校软件工程大三狗，最近被导师逼着给CMS系统升级"Word图片一键转存"功能。要求支持Word/Excel/PPT/PDF导入、公式高清显示、跨终端适配，预算99元（连阿里云OSS流量费都不够啊喂！）。经过一周爆肝，终于用UEditor+PHP+Vue3搞定了这个需求，现在把技术方案和避坑指南分享给各位道友。

---

一、技术架构设计（穷鬼版）

关键组件选择：

1. 编辑器插件：基于UEditor二次开发（开源免费）
2. 文档解析：使用mammoth.js解析Word（免费但需魔改）
3. 公式转换：MathJax+KaTeX双引擎（CDN免费）
4. 文件导入：docx.js+pdf.js（MIT协议）

---

二、前端实现（Vue3+UEditor）

1. 安装依赖

npm install ueditor-vue3 mammoth docx pdfjs-dist

2. 编辑器组件封装

import UEditor from 'ueditor-vue3'
import * as mammoth from 'mammoth'

export default {
  components: { UEditor },
  data() {
    return {
      editorId: 'editor-' + Math.random().toString(36).substr(2),
      editor: null
    }
  },
  mounted() {
    this.editor = UEditor.getEditor(this.editorId, {
      serverUrl: '/api/ueditor/upload', // 后端接口
      toolbars: [['source', 'importword']] // 自定义按钮
    })
    
    // 注册自定义按钮
    UE.registerUI('importword', (editor, uiName) => {
      const btn = new UE.ui.Button({
        name: 'importword',
        title: '导入Word',
        cssRules: 'background-image: url(/import.png) !important;',
        onclick: () => this.importWord()
      })
      editor.addListener('ready', () => {
        editor.registerCommand('importword', {
          execCommand: () => this.importWord()
        })
      })
      return btn
    })
  },
  methods: {
    async importWord() {
      const [file] = await this.$refs.fileInput.files
      const result = await mammoth.extractRawText({arrayBuffer: await file.arrayBuffer()})
      
      // 处理图片上传（简化版）
      const html = result.value.replace(/<img src="data:image\/(jpeg|png);base64,(.*?)"/g, (match, type, base64) => {
        const formData = new FormData()
        formData.append('file', this.dataURLtoBlob(`data:image/${type};base64,${base64}`), 'word-img.jpg')
        
        return fetch('/api/upload', { method: 'POST', body: formData })
          .then(res => res.json())
          .then(data => `<img src="${data.url}"`)
      })
      
      this.editor.setContent(html)
    }
  }
}

---

三、后端实现（PHP+OSS）

1. 文件上传接口

putObject($bucket, $object, fopen($file['tmp_name'], 'r'));
        return "https://{$bucket}.{$endpoint}/{$object}";
    } catch (OssException $e) {
        return false;
    }
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $file = $_FILES['file'];
    $url = uploadToOSS($file);
    
    if ($url) {
        echo json_encode(['url' => $url]);
    } else {
        http_response_code(500);
        echo json_encode(['error' => '上传失败']);
    }
}

2. UEditor适配接口

 'https://your-bucket.oss-cn-hangzhou.aliyuncs.com',
            'imagePathFormat' => '/uploads/{yyyy}{mm}{dd}/{time}{rand:6}'
        ]);
        break;
        
    case 'uploadimage':
        // 复用上面的uploadToOSS函数
        $url = uploadToOSS($_FILES['upfile']);
        echo json_encode([
            'state' => 'SUCCESS',
            'url' => $url,
            'title' => $_FILES['upfile']['name']
        ]);
        break;
}

---

四、公式转换方案

1. LaTeX转MathML（前端实现）

// 使用MathJax进行转换
function convertLaTeXToMathML(latex) {
  return new Promise((resolve) => {
    const math = MathJax.tex2svg(latex, { display: false });
    const mathml = math.querySelector('svg').outerHTML
      .replace(/]*)>/, '')
      .replace(/<\/svg>/, '');
    resolve(mathml);
  });
}

// 使用示例
convertLaTeXToMathML('\\frac{1}{2}').then(mathml => {
  document.getElementById('output').innerHTML = mathml;
});

---

五、避坑指南

1. Word解析：mammoth.js不支持表格样式，需手动解析document.xml
2. 跨域问题：阿里云OSS需配置CORS规则
3. 公式显示：移动端推荐使用KaTeX（性能更好）
4. 文件导入：Excel/PPT需使用xlsx.js和pptxjs分别处理

---

六、求职彩蛋

正在寻找Java/PHP后端岗位，求各位师哥师姐内推！附上我的技术栈：

• 熟练：PHP/MySQL/Linux/Vue3
• 熟悉：Docker/K8s/Redis
• 了解：Go/Python/区块链

加入技术交流群（QQ：223813913）：

• 新人领1-99元红包
• 推荐客户得20%提成（黄金会员50%！）
• 定期分享内推机会和面试题

（群主承诺：本群绝不涉黄赌毒，只聊技术和赚钱，违者群主直播倒立洗头！）

---

完整代码仓库：GitHub链接（含UEditor插件源码）
预算说明：实际开发成本≈0元（白嫖开源组件+阿里云学生机）
技术支持：加群后私聊群主获取《UEditor魔改手册》

复制插件目录

引入插件文件

	
	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转换成图片上传到服务器中。

上传网络图片

下载示例

点击下载完整示例