互联网公司怎样通过XHEditor实现Markdown公式转存？

原创于 2025-09-08 15:43:23 发布 · 687 阅读

15 ·

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

GEO检测

Word一键转存CMS升级方案

项目背景与需求分析

作为山西软件工程专业的大三学生，我正在给自己的CMS新闻管理系统添加Word一键转存功能。核心需求包括：

富文本粘贴：支持Word内容粘贴并保留完整样式
自动上传：图片自动上传到阿里云OSS
公式支持：Latex转MathML，多终端高清显示
多格式导入：Word/Excel/PPT/PDF导入保留样式
预算有限：99元以内解决方案

技术方案设计

前端实现方案




import { ref, onMounted } from 'vue';
import 'xheditor/dist/xheditor.min.js';
import 'xheditor/dist/xheditor_lang/zh-cn.js';

export default {
  setup() {
    const editor = ref(null);
    
    onMounted(() => {
      // 初始化xhEditor
      $(editor.value).xheditor({
        tools: 'full', // 全工具栏
        upImgUrl: '/api/upload/image', // 图片上传接口
        upImgExt: 'jpg,jpeg,gif,png',
        html5Upload: true,
        // 新增粘贴处理
        pasteUpload: true,
        pasteUploadUrl: '/api/upload/paste',
        // 公式支持
        latexUrl: '/api/latex/to-mathml'
      });
      
      // 添加自定义按钮
      addCustomButtons();
    });
    
    const addCustomButtons = () => {
      $.xheditor.tools.push({
        name: 'importWord',
        title: '导入Word',
        icon: 'word-icon.png',
        handler: importWord
      });
    };
    
    const importWord = () => {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.doc,.docx';
      
      input.onchange = async (e) => {
        const file = e.target.files[0];
        if (!file) return;
        
        try {
          const formData = new FormData();
          formData.append('file', file);
          
          const response = await fetch('/api/import/word', {
            method: 'POST',
            body: formData
          });
          
          const result = await response.json();
          if (result.success) {
            // 插入到编辑器
            $(editor.value).xheditor('pasteHTML', result.html);
          }
        } catch (error) {
          console.error('Word导入失败:', error);
        }
      };
      
      input.click();
    };
    
    return { editor, importWord };
  }
}

后端PHP实现

 true,
        'url' => $ossUrl
    ]);
} catch (Exception $e) {
    echo json_encode([
        'success' => false,
        'message' => $e->getMessage()
    ]);
}

function uploadToOSS($filePath, $fileName) {
    require_once 'oss-sdk/autoload.php';
    
    $accessKeyId = getenv('OSS_ACCESS_KEY_ID');
    $accessKeySecret = getenv('OSS_ACCESS_KEY_SECRET');
    $endpoint = getenv('OSS_ENDPOINT');
    $bucket = getenv('OSS_BUCKET');
    
    $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
    
    $object = 'uploads/' . date('Ymd') . '/' . uniqid() . '_' . $fileName;
    $ossClient->uploadFile($bucket, $object, $filePath);
    
    return 'https://' . $bucket . '.' . $endpoint . '/' . $object;
}

Word导入处理

getImageString());
        
        $ossUrl = uploadToOSS($imagePath, $image->getImageUri());
        unlink($imagePath);
        
        return $ossUrl;
    };
    
    // 转换HTML
    $htmlWriter = new \PhpOffice\PhpWord\Writer\HTML($phpWord);
    $htmlWriter->setImageHandler($imageHandler);
    
    $html = $htmlWriter->getContent();
    
    // 处理公式
    $html = convertLatexToMathML($html);
    
    echo json_encode([
        'success' => true,
        'html' => $html
    ]);
} catch (Exception $e) {
    echo json_encode([
        'success' => false,
        'message' => $e->getMessage()
    ]);
}

function convertLatexToMathML($html) {
    // 正则匹配Latex公式
    $pattern = '/\$\$(.*?)\$\$/';
    return preg_replace_callback($pattern, function($matches) {
        $latex = $matches[1];
        // 调用KaTeX或MathJax转换
        $mathml = latexToMathML($latex);
        return $mathml;
    }, $html);
}

免费解决方案推荐

1. xhEditor插件升级

我已经修改了xhEditor的源代码，添加了Word粘贴处理功能：

// xheditor-plugins/wordpaste.js
$.xheditor.plugins.wordpaste = {
    init: function(editor) {
        editor.pasteUpload = true;
        editor.pasteUploadUrl = '/api/upload/paste';
        
        editor.onPaste = function(e) {
            if (editor.pasteUpload) {
                e.preventDefault();
                
                const clipboardData = e.clipboardData || window.clipboardData;
                const items = clipboardData.items;
                
                for (let i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('text/html') !== -1) {
                        const blob = items[i].getAsFile();
                        const reader = new FileReader();
                        
                        reader.onload = function(event) {
                            const html = event.target.result;
                            uploadPastedContent(html);
                        };
                        
                        reader.readAsText(blob);
                        break;
                    }
                }
            }
        };
        
        function uploadPastedContent(html) {
            // 发送到服务器处理
            fetch(editor.pasteUploadUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ html: html })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    editor.pasteHTML(data.html);
                }
            });
        }
    }
};

2. 公式转换方案

使用MathJax实现Latex转MathML：

// latex-converter.js
function latexToMathML(latex) {
    // 使用MathJax转换
    if (typeof MathJax !== 'undefined') {
        return MathJax.tex2mml(latex);
    }
    
    // 备用方案：使用KaTeX
    if (typeof katex !== 'undefined') {
        return katex.renderToString(latex, {
            output: 'mathml',
            throwOnError: false
        });
    }
    
    // 最简方案：使用图片
    return ``;
}

99元预算解决方案

1. 购买现成插件

推荐购买"mammoth.js"的商业授权（个人版仅需$9.99），用于Word转HTML：

// 使用mammoth.js转换Word文档
import mammoth from 'mammoth';

mammoth.extractRawText({ arrayBuffer: fileArrayBuffer })
    .then(result => {
        const html = result.value; // 获取HTML内容
        const messages = result.messages; // 获取转换消息
        
        // 处理图片
        return processImages(html);
    })
    .then(html => {
        // 插入编辑器
        editor.pasteHTML(html);
    });

2. 阿里云OSS配置

// oss-upload.php
require_once 'oss-sdk/autoload.php';

$accessKeyId = "您的AccessKeyId";
$accessKeySecret = "您的AccessKeySecret";
$endpoint = "oss-cn-hangzhou.aliyuncs.com";
$bucket = "您的Bucket名称";

function uploadToOSS($filePath, $object) {
    global $accessKeyId, $accessKeySecret, $endpoint, $bucket;
    
    try {
        $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
        
        $options = array(
            OssClient::OSS_CHECK_MD5 => true,
            OssClient::OSS_PART_SIZE => 5 * 1024 * 1024
        );
        
        $ossClient->uploadFile($bucket, $object, $filePath, $options);
        
        return $ossClient->getObjectUrl($bucket, $object);
    } catch (OssException $e) {
        return false;
    }
}