全屏网站表现形式峰峰信息港免费发布平台

全屏网站表现形式,峰峰信息港免费发布平台,新余专业的企业网站建设公司,极验验证+wordpress【穷学生开发手记】99元预算搞定TinyMCE的Word图片转存全终端公式渲染#xff0c;顺便恰饭搞接单群 一、需求拆解#xff1a;穷学生的“既要又要还要” 作为江苏某软件学院大三“卷王”#xff0c;最近在给自己的CMS新闻系统升级#xff0c;需求如下#xff1a; 核心功能…【穷学生开发手记】99元预算搞定TinyMCE的Word图片转存全终端公式渲染顺便恰饭搞接单群一、需求拆解穷学生的“既要又要还要”作为江苏某软件学院大三“卷王”最近在给自己的CMS新闻系统升级需求如下核心功能TinyMCE编辑器加按钮支持Word粘贴图片自动上传阿里云OSS别问为啥不用本地存储穷。保留Word里的表格、字体、颜色、LaTeX公式转MathML、MathType公式图片形式也要保留。支持Word/Excel/PPT/PDF导入样式和图片全保留导师说“丑系统不给分”。技术约束前端Vue2马上升级Vue3但不想重构。后端PHP用Zend Studio写导师说“PHP是世界上最好的语言”。服务器阿里云ECS用自己的电脑当测试机电费都快交不起了。预算99元一顿火锅钱但能买200包辣条。社交需求找个接单群顺便让师哥师姐内推毕业即失业警告⚠️。建个QQ群223813913新人加群领1~99元红包钱不多图个乐。二、开源组件筛选白嫖党的狂欢1. TinyMCE插件选型目标找个能解析Word内容、自动上传图片到OSS的插件。候选方案tiny-mce-plugin-paste-office免费优点支持Office粘贴但图片需手动处理。自定义插件穷人最终方案用TinyMCE的paste和file_picker_callbackAPI结合后端PHP处理图片上传。2. LaTeX公式转MathML方案前端用MathJax渲染但多端兼容性差。后端用Pandoc转MathMLPHP调用Pandoc命令行穷但有效。3. 文件导入Word/Excel/PPT/PDF方案PHPWordWord解析。PHPExcelExcel解析。PHP-PPTXPPT解析。PDFParserPDF解析。统一处理解析后提取HTML和图片图片上传OSSHTML塞进TinyMCE。三、开发过程从0到1的骚操作1. 前端Vue2 TinyMCE定制插件步骤1安装TinyMCE和基础插件npminstalltinymce/tinymce-vue步骤2自定义插件wordpaste.jstinymce.PluginManager.add(wordpaste,function(editor){editor.on(paste,function(e){consthtmle.clipboardData.getData(text/html);if(htmlhtml.includes(word-content)){// 提取图片Base64传给后端换OSS URLconstimageshtml.match(/]srcdata:image[^]/g)||[];images.forEach(img{constbase64img.match(/srcdata:image([^;]);base64,([^])/);if(base64){// 调用后端API上传图片fetch(/api/upload-oss,{method:POST,body:JSON.stringify({base64:base64[2]})}).then(resres.json()).then(data{// 替换Base64为OSS URLconstnewHtmlhtml.replace(img,img.replace(base64[0],src${data.url}));editor.insertContent(newHtml);});}});}});});步骤3在Vue中集成2. 后端PHP处理图片上传和公式转换图片上传到OSS// upload-oss.php$base64$_POST[base64];$imageDatabase64_decode(preg_replace(#^data:image/\w;base64,#i,,$base64));$ossClientnewOSS\OssClient(key,secret,endpoint);$ossClient-putObject(bucket,images/.uniqid()..png,$imageData);echojson_encode([urlhttps://bucket.oss-cn-hangzhou.aliyuncs.com/images/xxx.png]);LaTeX转MathMLPandoc调用// latex-to-mathml.php$latex$_POST[latex];$mathmlshell_exec(echo $latex | pandoc -f latex -t mathml);echo$mathml;3. 文件导入Word示例前端调用PHPWord解析// 用户上传Word文件后constformDatanewFormData();formData.append(file,file);fetch(/api/import-word,{method:POST,body:formData}).then(resres.json()).then(data{tinymce.activeEditor.setContent(data.html);});后端PHPWord解析// import-word.phprequire_oncePHPWord/autoload.php;$phpWord\PhpOffice\PhpWord\IOFactory::load($_FILES[file][tmp_name]);$htmlWriternew\PhpOffice\PhpWord\Writer\HTML($phpWord);$html$htmlWriter-getContent();// 提取图片并上传OSS同上echojson_encode([html$html]);四、成果展示穷学生的“豪华”系统Word粘贴效果表格、字体、颜色全保留。图片自动上传OSS替换为URL。LaTeX公式渲染PC/手机/平板全终端高清显示MathML的功劳。文件导入Word/Excel/PPT/PDF都能导样式不乱。五、恰饭时间接单群和内推QQ群223813913新人加群领1~99元红包钱不多但能买几包辣条。推荐客户提20%比如成交1000元你拿200元躺着赚钱。内推需求师哥师姐看看我会写PHP/Vue/Java能扛996求内推最后一句骚话“穷学生的代码不是写出来的是薅羊毛薅出来的”群号再发一遍223813913进群送红包不送是狗复制插件安装jquerynpm install jquery在组件中引入// 引入tinymce-vueimportEditorfromtinymce/tinymce-vueimport{WordPaster}from../../static/WordPaster/js/wimport{zyOffice}from../../static/zyOffice/js/oimport{zyCapture}from../../static/zyCapture/z添加工具栏//添加导入excel工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importExcel()}varregister$1function(editor){editor.ui.registry.addButton(excelimport,{text:,tooltip:导入Excel文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(excelimport,{text:,tooltip:导入Excel文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(excelimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加word转图片工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importWordToImg()}varregister$1function(editor){editor.ui.registry.addButton(importwordtoimg,{text:,tooltip:Word转图片,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(importwordtoimg,{text:,tooltip:Word转图片,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(importwordtoimg,function(editor){Buttons.register(editor);});}Plugin();}());//添加粘贴网络图片工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().UploadNetImg()}varregister$1function(editor){editor.ui.registry.addButton(netpaster,{text:,tooltip:网络图片一键上传,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(netpaster,{text:,tooltip:网络图片一键上传,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(netpaster,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入PDF按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().ImportPDF()}varregister$1function(editor){editor.ui.registry.addButton(pdfimport,{text:,tooltip:导入pdf文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pdfimport,{text:,tooltip:导入pdf文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pdfimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入PPT按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importPPT()}varregister$1function(editor){editor.ui.registry.addButton(pptimport,{text:,tooltip:导入PowerPoint文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pptimport,{text:,tooltip:导入PowerPoint文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pptimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入WORD按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importWord()}varregister$1function(editor){editor.ui.registry.addButton(wordimport,{text:,tooltip:导入Word文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordimport,{text:,tooltip:导入Word文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加WORD粘贴按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);varicohttp://localhost:8080/static/WordPaster/plugin/word.pngfunctionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).PasteManual()}varregister$1function(editor){editor.ui.registry.addButton(wordpaster,{text:,tooltip:Word一键粘贴,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordpaster,{text:,tooltip:Word一键粘贴,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordpaster,function(editor){Buttons.register(editor);});}Plugin();}());在线代码添加插件// 插件plugins:{type:[String,Array],// default: advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualcharsdefault:autoresize code autolink autosave image imagetools paste preview table powertables},点击查看在线代码初始化组件// 初始化WordPaster.getInstance({// 上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,// 为图片地址增加域名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:})在页面中引入组件功能演示编辑器在编辑器中增加功能按钮导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片。下载示例点击下载完整示例