标志设计欣赏网站免费的个人网站

张

张建站

2026/4/7 0:56:58

10分钟阅读

标志设计欣赏网站,免费的个人网站,易语言开发安卓app,微信公众平台注册收费吗《大三程序猿的CMS升级记#xff1a;Word一键转存公式高清显示#xff0c;99元预算搞大事#xff01;》一、背景 “师弟#xff0c;你这CMS新闻系统能直接粘贴Word里的表格和公式吗#xff1f;” “不能啊师姐#xff0c;现在编辑器只能粘贴纯文本…” “那毕业论文里…《大三程序猿的CMS升级记Word一键转存公式高清显示99元预算搞大事》一、背景“师弟你这CMS新闻系统能直接粘贴Word里的表格和公式吗”“不能啊师姐现在编辑器只能粘贴纯文本…”“那毕业论文里的MathType公式咋办总不能让我手动敲LaTeX吧”被师姐灵魂拷问后我摸着秃了一半的脑袋决定用99元预算给wangEditor加个黑科技按钮实现Word/Excel/PPT/PDF一键导入图片自动上传OSSLaTeX/MathType公式自动转MathML多端高清显示表格/字体/颜色/形状样式全保留跨平台支持Windows/macOS/Linux全家桶二、技术选型白嫖版组件方案成本编辑器wangEditor 自定义插件免费文档解析mammoth.jsWord pdf.jsPDF免费公式转换MathJaxLaTeX→MathML免费文件上传阿里云OSS SDK免费后端接口PHP原生拒绝Laravel臃肿免费调试工具Postman Chrome DevTools免费总预算99元预留给OSS流量费三、前端实现Vue2 wangEditor1. 安装依赖npminstallwangeditor mammoth pdf-lib mathjax-full --save2. 自定义编辑器插件// src/plugins/WordPastePlugin.jsimportEditorfromwangeditorimportmammothfrommammothimport{PDFDocument}frompdf-libexportdefaultclassWordPastePlugin{constructor(editor,ossConfig){this.editoreditorthis.ossConfigossConfigthis.initButton()}initButton(){const{editor}thiseditor.config.menus[...editor.config.menus,wordPaste]editor.config.customUploadImgasync(files,insertFn){// 多图上传OSS逻辑省略}editor.config.customPaste(e){constitems(e.clipboardData||window.clipboardData).itemsfor(letitemofitems){if(item.type.indexOf(office)-1){this.handleOfficePaste(item.getAsFile())e.preventDefault()break}}}}asynchandleOfficePaste(file){if(file.name.endsWith(.docx)){constresultawaitmammoth.extractRawText({arrayBuffer:awaitfile.arrayBuffer()})this.parseWordContent(result.value)}elseif(file.name.endsWith(.pdf)){constpdfawaitPDFDocument.load(awaitfile.arrayBuffer())// PDF解析逻辑需自行实现}}parseWordContent(html){// 1. 替换Word生成的垃圾标签letcleanHtmlhtml.replace(/\/o:p/g,)// 2. 公式转换调用后端APIcleanHtmlcleanHtml.replace(/\$\$(.*?)\$\$/g,(match,latex){return${latex}})this.editor.cmd.do(insertHTML,cleanHtml)}}3. 集成到Vue组件import Editor from wangeditor import WordPastePlugin from ./plugins/WordPastePlugin export default { data() { return { editor: null, ossConfig: { region: oss-cn-hangzhou, accessKeyId: your-key, accessKeySecret: your-secret, bucket: your-bucket } } }, mounted() { this.editor new Editor({ selector: [this.$refs.editorMenu, this.$refs.editorContent], onChange: () console.log(内容变化) }) new WordPastePlugin(this.editor, this.ossConfig) this.editor.create() } }四、后端实现PHP1. OSS上传接口// api/upload.phpputObject($bucket,$object,fopen($file[tmp_name],r));echojson_encode([urlhttps://{$bucket}.{$endpoint}/{$object},name$file[name]]);2. 公式转换接口// api/convert-math.phpEm c2EOD;header(Content-Type: application/xml);echo$mathml;五、部署优化跨域问题在阿里云OSS配置CORS规则[{AllowedOrigin:[*],AllowedMethod:[GET,POST,PUT],AllowedHeader:[*]}]性能优化使用CDN加速MathJax资源对大文件分片上传启用OSS图片处理缩略图/水印安全加固接口添加JWT验证限制上传文件类型对LaTeX公式进行XSS过滤六、求职彩蛋师姐我们外包群现在搞活动加入QQ群223813913 领1-99元红包推荐客户拿20%提成黄金会员50%内推简历优先处理群主在字节/阿里/腾讯都有HR资源PS群文件有完整源码部署文档支持Vue2/Vue3无缝迁移PHP后端可直接部署到宝塔面板最终效果师姐把论文公式粘进来后“这比Word还爽”复制插件文件安装jquerynpm install jquery导入组件importEfromwangeditorconst{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}Eimport{WordPaster}from../../static/WordPaster/js/wimport{zyCapture}from../../static/zyCapture/zimport{zyOffice}from../../static/zyOffice/js/o初始化组件//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().UploadNetImg();}tryChangeActive(){this.active()}}exportdefault{name:HelloWorld,data(){return{msg:Welcome to Your Vue.js App}},mounted(){vareditornewE(#editor);WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,License2:,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:http://localhost:8891{url},//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});zyCapture.getInstance({config:{PostUrl:http://localhost:8891/upload.aspx,License2:,FileFieldName:file,Fields:{uname:test},ImageUrl:http://localhost:8891{url}}})// zyoffice// 使用前请在服务端部署zyoffice// http://www.ncmem.com/doc/view.aspx?id82170058de824b5c86e2e666e5be319czyOffice.getInstance({word:http://localhost:13710/zyoffice/word/convert,wordExport:http://localhost:13710/zyoffice/word/export,pdf:http://localhost:13710/zyoffice/pdf/upload})// 注册菜单E.registerMenu(zyCaptureBtn,zyCaptureBtn)E.registerMenu(WordPasterBtn,WordPasterBtn)E.registerMenu(ImportWordToImgBtn,ImportWordToImgBtn)E.registerMenu(NetImportBtn,NetImportBtn)E.registerMenu(WordImportBtn,WordImportBtn)E.registerMenu(ExcelImportBtn,ExcelImportBtn)E.registerMenu(PPTImportBtn,PPTImportBtn)E.registerMenu(PDFImportBtn,PDFImportBtn)E.registerMenu(importWordBtn,importWordBtn)E.registerMenu(exportWordBtn,exportWordBtn)E.registerMenu(importPdfBtn,importPdfBtn)//挂载粘贴事件editor.txt.eventHooks.pasteEvents.length0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2newE(#editor2);//挂载粘贴事件edt2.txt.eventHooks.pasteEvents.length0;edt2.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(edt2).Paste();e.preventDefault();return;});edt2.create();}}h1,h2{font-weight:normal;}ul{list-style-type:none;padding:0;}li{display:inline-block;margin:010px;}a{color:#42b983;}测试前请配置图片上传接口并测试成功接口测试接口返回JSON格式参考为编辑器添加按钮components:{Editor,Toolbar},data(){return{editor:null,html:dd,toolbarConfig:{insertKeys:{index:0,keys:[zycapture,wordpaster,pptimport,pdfimport,netimg,importword,exportword,importpdf]}},editorConfig:{placeholder:},mode:default// or simple}},整合效果导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例