巢湖市网站建设推广,网站流量利用,我要自学网怎么样,山东建设工程信息网站一文搞定Word内容粘贴公式转换多终端适配方案 作为一名大三的海南软件工程学生#xff0c;我这个CMS新闻管理系统升级计划确实有点野心勃勃啊#xff01;不过别担心#xff0c;我已经为你准备了一套完整方案#xff0c;保证让你在毕业前就能做出一个惊艳的作品…一文搞定Word内容粘贴公式转换多终端适配方案作为一名大三的海南软件工程学生我这个CMS新闻管理系统升级计划确实有点野心勃勃啊不过别担心我已经为你准备了一套完整方案保证让你在毕业前就能做出一个惊艳的作品一、技术选型与预算方案根据99元的巨额预算我推荐以下组合方案编辑器升级放弃UEditor改用wangEditor V5免费 公式插件免费Word粘贴处理使用tui.editor的粘贴处理功能免费它能完美保留Word样式公式转换MathJax免费实现LaTeX转MathML多终端适配文件导入SheetJS社区版免费处理ExcelPDF.js免费预览PDF总成本0元省下的99元可以请我喝奶茶了~开玩笑的二、前后端完整实现方案前端实现Vue2版本import{Editor,Toolbar}fromwangeditor/editor-for-vueimportwangeditor/editor/dist/css/style.cssexportdefault{components:{Editor,Toolbar},data(){return{editor:null,html:,toolbarConfig:{excludeKeys:[group-video,fullScreen],insertKeys:{index:5,keys:[formula]// 添加公式按钮}},editorConfig:{placeholder:请输入内容...,MENU_CONF:{uploadImage:{server:/api/upload,fieldName:file,maxFileSize:10*1024*1024,// 10MallowedFileTypes:[image/*],onSuccess(file,res){console.log(${file.name}上传成功,res)}},pasteText:{onPasteText(text,html){if(html.includes(MathType)){// 处理Word粘贴的MathType公式returnhandleMathType(html)}returnhtml}}}}}},methods:{onCreated(editor){this.editoreditor// 注册粘贴事件editor.on(paste,this.handlePaste)},asynchandlePaste(e){constitems(e.clipboardData||window.clipboardData).itemsfor(leti0;iitems.length;i){if(items[i].kindfileitems[i].type.includes(image)){// 处理图片粘贴constfileitems[i].getAsFile()constformDatanewFormData()formData.append(file,file)try{constresawaitaxios.post(/api/upload,formData)editor.insertImage({src:res.data.url,alt:粘贴图片})}catch(err){console.error(图片上传失败,err)}}}},onChange(){// 内容变化处理},beforeDestroy(){if(this.editor)this.editor.destroy()}}}后端PHP实现图片上传处理No file uploaded]));}// 阿里云OSS配置$accessKeyId您的AccessKeyId;$accessKeySecret您的AccessKeySecret;$endpointoss-cn-hangzhou.aliyuncs.com;$bucket您的Bucket名称;// 生成唯一文件名$extensionpathinfo($file[name],PATHINFO_EXTENSION);$fileNameuniqid()...$extension;$filePath$targetDir.$fileName;if(!move_uploaded_file($file[tmp_name],$filePath)){http_response_code(500);die(json_encode([errorFailed to move uploaded file]));}// 上传到阿里云OSStry{require_onceoss-sdk/autoload.php;$ossClientnewOssClient($accessKeyId,$accessKeySecret,$endpoint);$ossClient-uploadFile($bucket,$fileName,$filePath);$ossUrlhttps://{$bucket}.{$endpoint}/{$fileName};// 删除本地临时文件unlink($filePath);echojson_encode([url$ossUrl,name$file[name],size$file[size]]);}catch(Exception$e){http_response_code(500);echojson_encode([error$e-getMessage()]);}?公式转换服务Node.js微服务// formula-service.jsconstexpressrequire(express);constmathjaxrequire(mathjax-full/js/mathjax).mathjax;constMathMLrequire(mathjax-full/js/input/mathml).MathML;constHTMLrequire(mathjax-full/js/output/chtml).CHTML;const{liteAdaptor}require(mathjax-full/js/adaptors/liteAdaptor);const{RegisterHTMLHandler}require(mathjax-full/js/handlers/html);constappexpress();app.use(express.json());constadaptorliteAdaptor();RegisterHTMLHandler(adaptor);constmathmlnewMathML();consthtmlnewHTML({fontURL:https://cdn.jsdelivr.net/npm/mathjax3/es5/output/chtml/fonts/woff-v2});constdocmathjax.document(,{InputJax:mathml,OutputJax:html});app.post(/convert,(req,res){try{constlatexreq.body.latex;constnodemathjax.mathToNode(latex,{display:req.body.display||false},doc);constmathmlOutputmathjax.startup.toMML(node);consthtmlOutputadaptor.innerHTML(html.mathToNode(node,doc));res.json({mathml:mathmlOutput,html:htmlOutput,svg:adaptor.innerHTML(mathjax.mathToSVGNode(latex))});}catch(err){res.status(400).json({error:err.message});}});app.listen(3000,()console.log(公式转换服务运行在 http://localhost:3000));三、多终端适配方案CSS适配公式显示/* 公式显示样式 - 多终端适配 */.formula{display:inline-block;margin:0 0.2em;vertical-align:middle;max-width:100%;overflow-x:auto;}media(max-width:768px){.formula{font-size:1.2em!important;}mjx-container[jaxCHTML]{overflow-x:auto;max-width:100%;}}Vue组件封装公式编辑器// FormulaEditor.vueexportdefault{data(){return{latexCode:,previewHtml:,symbols:[\\frac{a}{b},\\sqrt{x},\\sum_{i1}^n,\\int_a^b,\\alpha,\\beta,\\times]}},watch:{latexCode(newVal){this.debouncePreview()}},methods:{debouncePreview:_.debounce(function(){if(!this.latexCode)returnaxios.post(/formula/preview,{latex:this.latexCode}).then(res{this.previewHtmlres.data.html})},500),insertSymbol(symbol){this.latexCodesymbol},insert(){this.$emit(insert,{latex:this.latexCode,mathml:this.previewMathml,html:this.previewHtml})this.latexCodethis.previewHtml}}}四、部署与优化建议服务器部署# Linux服务器部署示例sudoaptupdatesudoaptinstallnginx mysql-server php-fpmsudosystemctl start nginxsudosystemctlenablenginx性能优化# nginx.conf优化配置 gzip on; gzip_types text/plain text/css application/json application/javascript application/xmlrss text/javascript; client_max_body_size 20M; location / { try_files $uri $uri/ /index.php?$query_string; }安全配置// 防止文件上传漏洞$allowedExtensions[jpg,jpeg,png,gif];$extensionstrtolower(pathinfo($filename,PATHINFO_EXTENSION));if(!in_array($extension,$allowedExtensions)){die(文件类型不允许);}五、找工作内推秘籍虽然我不能直接给你内推但我可以给你几个开挂技巧GitHub是最好简历把这个CMS项目好好包装README写漂亮放GitHub上技术博客加分把开发过程写成系列文章发在掘金/CSDNLinkedIn优化标题别写求职写全栈开发者 | CMS系统专家项目描述用STAR法则情境-任务-行动-结果深圳公司推荐腾讯云CMS相关团队金蝶企业内容管理微盟电商内容系统至于那个月入2万的推广我建议还是专注技术——毕竟吹空调赚钱这种事等我们成了CTO再说吧需要更详细的实现细节或者遇到问题欢迎继续交流记住好的程序员不是不写代码而是会抄代码当然是合法合规地借鉴开源项目啦复制插件目录引入插件文件UEditor 1.4.3.3示例注意不要重复引入jquery如果您的项目已经引入了jq则不用再引入jq-1.4在工具栏中增加插件按钮//工具栏上的所有的功能按钮和下拉框可以在new编辑器的实例时选择自己需要的重新定义toolbars:[[fullscreen,source,|,zycapture,|,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf]]初始化控件varposwindow.location.href.lastIndexOf(/);varapi[window.location.href.substr(0,pos1),asp/upload.asp].join();WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:,//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});//加载控件注意如果接口字段名称不是file请配置FileFieldName。ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch匹配图片地址如果服务器返回的是JSON则需要通过正则匹配ImageMatch:,点击参考链接配置ImageUrl为图片地址增加域名如果服务器返回的图片地址是相对路径可通过此属性添加自定义域名。ImageUrl:,点击查看详细教程配置SESSION如果接口有权限验证登陆验证SESSION验证请配置COOKIE。或取消权限验证。参考http://www.ncmem.com/doc/view.aspx?id8602DDBF62374D189725BF17367125F3效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片下载示例点击下载完整示例