xhEditor导入微信公众号文章自动排版-平芜编程栈

企业网站后台管理系统 - Word/公众号内容导入插件解决方案

一、系统架构设计

二、前端实现（Vue3 + xhEditor）

import { ref } from 'vue'; import * as OSS from 'ali-oss'; const editor = ref(null); const editorConfig = { toolbar: [ ...defaultToolbar, { name: 'wordImport', title: 'Word导入', onClick: () => importFile('docx') }, { name: 'wechatImport', title: '公众号导入', onClick: importWechatContent } ], plugins: ['wordpaste'] }; // 处理粘贴事件 const handlePaste = async (e) => { const items = (e.clipboardData || window.clipboardData).items; const formData = new FormData(); Array.from(items).forEach(item => { if (/^image\//.test(item.type)) { const blob = item.getAsFile(); formData.append('images', blob); } }); // 上传图片到OSS const client = new OSS({ region: 'oss-cn-hangzhou', accessKeyId: 'your_key', accessKeySecret: 'your_secret', bucket: 'your_bucket' }); const results = await Promise.all( Array.from(formData.entries()).map(async ([, file]) => { const res = await client.put(`docs/${Date.now()}.png`, file); return res.url; }) ); // 插入带图片的HTML editor.value.insertHTML(`<divclass="pasted-content">${e.clipboardData.getData('text/html')} ${results.map(url => `<imgsrc="${url}">`).join('')}</div>`); };

三、后端实现（ASP.NET WebForm）

// DocumentHandler.ashxpublicclassDocumentHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){varfile=context.Request.Files["file"];vardocType=context.Request["type"];switch(docType){case"docx":ProcessWordDocument(file.InputStream);break;case"wechat":ProcessWechatContent(context.Request["url"]);break;}}privatevoidProcessWordDocument(Streamstream){using(vardoc=newXWPFDocument(stream)){varhtmlBuilder=newStringBuilder();// 处理段落样式foreach(varparaindoc.Paragraphs){htmlBuilder.AppendFormat("{3}",para.Style.FontName??"SimSun",para.Style.FontSize,ColorTranslator.ToHtml(para.Style.Color),para.Text);}// 处理图片foreach(varimageindoc.AllPictures){varossUrl=UploadToOSS(image.Content);htmlBuilder.AppendFormat("",ossUrl);}context.Response.Write(htmlBuilder.ToString());}}}

四、关键技术实现

文档解析服务：
- 使用Apache POI处理Office文档
- 使用iTextSharp处理PDF
- 公式转换：调用MathJax服务（需部署私有化服务）
字体兼容方案：

// 字体映射配置varfontMappings=newDictionary{{"GB2312","SimSun"},{"Times New Roman","SimSun"}};// 在文档处理时应用字体映射para.Style.FontName=fontMappings.ContainsKey(para.Style.FontName)?fontMappings[para.Style.FontName]:para.Style.FontName;

云存储集成：

publicstringUploadToOSS(byte[]fileData){varclient=newOssClient("oss-cn-hangzhou","accessKeyId","accessKeySecret");using(varstream=newMemoryStream(fileData)){varresult=client.PutObject("bucket-name",$"docs/{Guid.NewGuid()}.png",stream);returnclient.GeneratePresignedUri("bucket-name",result.Key,DateTime.Now.AddHours(1)).ToString();}}

五、部署方案

插件安装包结构：

/plugins /wordimport plugin.js plugin.css /assets oss-sdk.min.js mathjax-config.js

数据库升级脚本：

-- 添加文档转换记录表CREATETABLEDocumentConvertLogs(LogIDINTPRIMARYKEYIDENTITY,FileName NVARCHAR(255),ConvertTimeDATETIMEDEFAULTGETDATE(),StatusTINYINT,ErrorMessage NVARCHAR(MAX));