医院信息系统怎样优化XHEditor的DICOM标注粘贴？

我是如何用99元预算给CMS系统加了个"Word全家桶"功能的

各位学弟学妹们好，我是你们山西老学长，最近不是在搞毕业设计嘛，做了个CMS新闻管理系统。导师看了说：“你这系统发新闻还得手动排版？太土了吧！” 我一想也是，学校发个通知、老师发个论文，要是能从Word直接粘贴多好啊！

需求分析：我想要个"Word全家桶"

我的梦想功能清单：

1. Word内容一键粘贴保留所有样式（表格、公式啥的都要）
2. 图片自动上传到阿里云OSS
3. 支持Latex公式转MathML，在各端都能高清显示
4. 还能导入Word/Excel/PPT/PDF文件
5. 预算只有99元（毕竟学生党穷啊）

技术选型：穷学生的智慧

前端方案：

• 继续用现有的xhEditor？No！太老了！
• 改用 wangEditor v5（免费！Vue2/Vue3都支持）
• 配合 mammoth.js 处理Word文档（开源免费）
• MathJax 处理公式转换（也是免费的）

后端方案：

• ASP.NET WebForm接收处理
• 阿里云OSS SDK上传图片
• 用 Aspose.Words 免费版处理文档（收费版要好几千，但免费版基本够用）

代码实战：干货来了！

前端部分（Vue2）

// 在编辑器组件中
import E from 'wangeditor'
import mammoth from 'mammoth'

export default {
  mounted() {
    const editor = new E('#editor')
    
    // 自定义粘贴Word内容按钮
    editor.config.menus = editor.config.menus.concat(['pasteWord'])
    editor.config.customAlert = (s) => { console.log(s) }
    
    editor.config.customPaste = (pasteHtml) => {
      // 这里处理Word粘贴逻辑
      return pasteHtml
    }
    
    editor.create()
    
    // 添加Word导入按钮
    const btn = `
      
      导入Word
    `
    document.querySelector('.w-e-toolbar').insertAdjacentHTML('beforeend', btn)
    
    document.getElementById('word-import').addEventListener('change', (e) => {
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.onload = (event) => {
        mammoth.extractRawText({arrayBuffer: event.target.result})
          .then((result) => {
            editor.txt.html(result.value)
          })
      }
      reader.readAsArrayBuffer(file)
    })
  }
}

后端部分（C#）

// 处理图片上传ASP.NET WebForm
protected void UploadImage(HttpPostedFile file)
{
    string accessKeyId = "你的阿里云AccessKey";
    string accessKeySecret = "你的阿里云Secret";
    string endpoint = "oss-cn-shanghai.aliyuncs.com";
    string bucketName = "你的bucket";
    
    var client = new OssClient(endpoint, accessKeyId, accessKeySecret);
    
    try
    {
        string objectName = "images/" + Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);
        using (var stream = file.InputStream)
        {
            client.PutObject(bucketName, objectName, stream);
        }
        
        string imageUrl = "https://" + bucketName + "." + endpoint + "/" + objectName;
        Response.Write(imageUrl);
    }
    catch (Exception ex)
    {
        Response.StatusCode = 500;
        Response.Write("上传失败: " + ex.Message);
    }
}

// 处理Word文档导入
protected void ImportWord(HttpPostedFile file)
{
    var doc = new Document(file.InputStream);
    string html;
    using (var stream = new MemoryStream())
    {
        doc.Save(stream, SaveFormat.Html);
        stream.Position = 0;
        using (var reader = new StreamReader(stream))
        {
            html = reader.ReadToEnd();
        }
    }
    
    // 处理图片上传
    var regex = new Regex("]+src=\"([^\">]+)\"");
    var matches = regex.Matches(html);
    foreach (Match match in matches)
    {
        string base64 = match.Groups[1].Value;
        if (base64.StartsWith("data:image"))
        {
            // 上传base64图片到OSS并替换URL
            string newUrl = UploadBase64Image(base64);
            html = html.Replace(base64, newUrl);
        }
    }
    
    Response.Write(html);
}

踩坑经验分享

1. 公式显示问题：MathJax默认配置在移动端显示效果不好，需要加这个配置：

   MathJax = {
     tex: {
       inlineMath: [['$', '$'], ['\$', '\$']]
     },
     svg: {
       fontCache: 'global'
     },
     options: {
       enableMenu: false // 移动端禁用右键菜单
     }
   };
   

2. Word表格样式丢失：mammoth.js默认会简化表格样式，需要这样配置：

   mammoth.convertToHtml({arrayBuffer: file}, {
     styleMap: [
       "p[style-name='Heading 1'] => h1:fresh",
       "table => table:border"
     ]
   })
   

3. OSS上传超时：阿里云SDK默认超时时间太短，要这样设置：

   var client = new OssClient(endpoint, accessKeyId, accessKeySecret) {
     Timeout = 600000 // 10分钟超时
   };
   

99元预算花在哪了？

最终我选择了购买 TinyMCE 的"基础插件包"学生优惠版（原价299，学生99元），因为它：

• 原生支持Word粘贴保留样式
• 有现成的图片上传处理器
• 支持表格、公式等复杂内容
• 文档齐全，社区活跃

老学长的求职碎碎念

看到你们还在找工作，老学长我真是感同身受啊！去年这时候我也天天投简历投到怀疑人生。后来发现：

• 内推真的比海投强100倍！（可惜我们公司现在不招人了）
• 作品集比简历重要（比如这个CMS系统就是我找工作的敲门砖）
• 外包群可以加，但别指望靠拉人头赚钱（别问我怎么知道的）

对了，我的毕业设计导师后来看中这个Word粘贴功能，推荐我去了一家做在线教育系统的公司，现在天天和Word文档斗智斗勇，月薪8K（在山西还算可以啦）。

所以学弟学妹们，与其想着拉人头赚钱，不如好好打磨自己的项目和技术。你看我这个99元的小功能，不就帮我找到了工作嘛！

最后放个完整项目地址：[GitHub链接]（开玩笑的，毕业设计还没公开呢）

P.S. 那个QQ群我加了，领了3块钱红包就退了，还是专心写代码比较实在…(逃)

将插件目录复制到项目中

引入插件文件

定义插件图标

初始化插件

在工具栏中添加插件按钮

效果

编辑器

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

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

Word转图片

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

导入PDF

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

导入PPT

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

上传网络图片

一键自动上传网络图片，自动下载远程服务器图片，自动上传远程服务器图片

下载示例

点击下载完整示例