xhEditor word粘贴支持批注和修订-程序员充电站

（推了推黑框眼镜，正色道）作为专注政企数字化解决方案的山西PHP团队，我们为该项目设计了一套高可用性技术方案：

技术架构设计

前端核心代码（Vue3插件）

// src/plugins/xhEditorWord.jsexportdefault{install(app){app.provide('xhEditorWord',{install:(editor)=>{// 添加工具栏按钮editor.addButton('wordpaste',{title:'智能粘贴',icon:'📋',onclick:()=>{navigator.clipboard.read().then(async(data)=>{constblob=awaitdata.items[0].getAsFile();constformData=newFormData();formData.append('content',blob);// 调用PHP接口处理constres=awaitfetch('/api/word-paste',{method:'POST',body:formData});const{html,images}=awaitres.json();editor.insertHTML(html);// 批量上传图片images.forEach(img=>{constimgForm=newFormData();imgForm.append('file',img.blob);fetch('/api/upload',{method:'POST',body:imgForm}).then(r=>r.json()).then(data=>{editor.insertHTML(``);});});});}});// 微信文章粘贴处理editor.on('paste',(e)=>{constclipboard=e.clipboardData;if(clipboard.types.includes('text/html')){consthtml=clipboard.getData('text/html');constparser=newDOMParser();constdoc=parser.parseFromString(html,'text/html');// 提取微信特色图片constimgs=doc.querySelectorAll('img[data-src]');imgs.forEach(img=>{constsrc=img.getAttribute('data-src');fetch(src).then(r=>r.blob()).then(blob=>{constform=newFormData();form.append('file',blob);fetch('/api/upload',{method:'POST',body:form}).then(r=>r.json()).then(data=>{img.setAttribute('src',data.url);});});});editor.insertHTML(doc.body.innerHTML);}});}});}}

后端PHP处理逻辑

getWriter()->getOutput();// 处理公式转换preg_match_all('/{(\\\\[a-z]+)(.*?)}/i',$output,$matches);foreach($matches[0]as$key=>$match){$latex=stripslashes(substr($match,1,-1));$mathml=convertLatexToMathML($latex);$output=str_replace($match,$mathml,$output);}// 提取图片preg_match_all('/src="data:image\/(jpeg|png|gif);base64,(.*?)"/',$output,$imgMatches);$images=[];foreach($imgMatches[2]as$key=>$base64){$blob=base64_decode($base64);$filename=uniqid().'.'.$imgMatches[1][$key];file_put_contents('temp/'.$filename,$blob);$ossUrl=uploadToOSS('temp/'.$filename);$images[]=['original'=>$imgMatches[0][$key],'url'=>$ossUrl];$output=str_replace($imgMatches[0][$key],'src="'.$ossUrl.'"',$output);}echojson_encode(['html'=>$output,'images'=>$images]);functionconvertLatexToMathML($latex){// 调用MathJax服务$ch=curl_init('https://api.mathjax.org/convert');curl_setopt($ch,CURLOPT_POSTFIELDS,json_encode(['latex'=>$latex]));curl_setopt($ch,CURLOPT_HTTPHEADER,['Content-Type: application/json']);curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);$response=curl_exec($ch);curl_close($ch);returnjson_decode($response)->mathml;}functionuploadToOSS($file){// 阿里云OSS SDK集成$ossClient=newOSS\OssClient('key','secret','endpoint');$ossClient->uploadFile('bucket',basename($file),$file);return'https://bucket.oss-cn-hangzhou.aliyuncs.com/'.basename($file);}?>