装饰公司网站方案赤水市建设局官方网站

装饰公司网站方案,赤水市建设局官方网站,用yii框架做的网站如何搭建,新闻事件TinyMCE 文档导入插件开发方案 大家好#xff0c;我是杭州的PHP程序员小张#xff0c;最近接了个CMS企业官网的外包项目#xff0c;客户要求在TinyMCE 5编辑器里增加Word/Excel/PPT/PDF导入功能#xff0c;还要支持微信公众号内容导入。经过一番调研#xff0c;我决定自己…TinyMCE 文档导入插件开发方案大家好我是杭州的PHP程序员小张最近接了个CMS企业官网的外包项目客户要求在TinyMCE 5编辑器里增加Word/Excel/PPT/PDF导入功能还要支持微信公众号内容导入。经过一番调研我决定自己开发这个插件毕竟预算只有680元开源产品又满足不了需求。插件功能概述这个插件主要实现在TinyMCE工具栏添加导入按钮支持Word/Excel/PPT/PDF文档导入支持微信公众号内容粘贴保留原始格式、图片、表格和公式Latex公式自动转MathML图片自动上传到阿里云OSS前端实现 (Vue2 TinyMCE 5)1. 创建插件文件src/plugins/docimport/plugin.js(function(){constDocImportfunction(editor,url){// 注册工具栏按钮editor.ui.registry.addButton(docimport,{icon:upload,tooltip:导入Word/Excel/PPT/PDF,onAction:function(){// 创建文件选择对话框constinputdocument.createElement(input);input.typefile;input.accept.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf;input.style.displaynone;input.onchangefunction(e){constfilee.target.files[0];if(!file)return;// 显示加载中editor.setProgressState(true);// 上传文件到后端处理constformDatanewFormData();formData.append(file,file);fetch(url/import.php,{method:POST,body:formData}).then(responseresponse.json()).then(data{if(data.success){// 插入处理后的HTML内容editor.insertContent(data.html);// 上传图片到OSSif(data.imagesdata.images.length0){uploadImages(editor,data.images);}}else{editor.notificationManager.open({text:导入失败: data.message,type:error});}}).catch(error{editor.notificationManager.open({text:导入过程中出错: error.message,type:error});}).finally((){editor.setProgressState(false);});};document.body.appendChild(input);input.click();document.body.removeChild(input);}});// 添加粘贴处理editor.on(paste,function(e){constclipboardDatae.clipboardData||window.clipboardData;// 处理微信公众号内容if(clipboardData.types.includes(text/html)){consthtmlclipboardData.getData(text/html);if(html.includes(mp.weixin.qq.com)){e.preventDefault();processWechatContent(editor,html);return;}}// 处理Word粘贴if(clipboardData.types.includes(Files)){constitemsclipboardData.items;for(leti0;iitems.length;i){constitemitems[i];if(item.kindfileitem.type.match(/^application\/(msword|vnd.*word|vnd.*excel|vnd.*powerpoint|pdf)/)){e.preventDefault();constfileitem.getAsFile();processPastedFile(editor,file);return;}}}});// 上传图片到OSSconstuploadImagesfunction(editor,images){images.forEach(imgData{fetch(url/upload.php,{method:POST,body:JSON.stringify({image:imgData.base64,name:imgData.name}),headers:{Content-Type:application/json}}).then(responseresponse.json()).then(data{if(data.success){// 替换临时URL为OSS URLconstcontenteditor.getContent();constnewContentcontent.replace(imgData.tempUrl,data.url);editor.setContent(newContent);}});});};// 处理微信公众号内容constprocessWechatContentfunction(editor,html){editor.setProgressState(true);fetch(url/wechat.php,{method:POST,body:JSON.stringify({html:html}),headers:{Content-Type:application/json}}).then(responseresponse.json()).then(data{if(data.success){editor.insertContent(data.html);if(data.imagesdata.images.length0){uploadImages(editor,data.images);}}else{editor.notificationManager.open({text:处理微信公众号内容失败: data.message,type:error});}}).catch(error{editor.notificationManager.open({text:处理微信公众号内容出错: error.message,type:error});}).finally((){editor.setProgressState(false);});};// 处理粘贴的文件constprocessPastedFilefunction(editor,file){editor.setProgressState(true);constformDatanewFormData();formData.append(file,file);fetch(url/import.php,{method:POST,body:formData}).then(responseresponse.json()).then(data{if(data.success){editor.insertContent(data.html);if(data.imagesdata.images.length0){uploadImages(editor,data.images);}}else{editor.notificationManager.open({text:导入粘贴内容失败: data.message,type:error});}}).catch(error{editor.notificationManager.open({text:处理粘贴内容出错: error.message,type:error});}).finally((){editor.setProgressState(false);});};};// 返回插件定义return{getMetadata:function(){return{name:docimport,url:https://your-plugin-site.com};},init:DocImport};})();2. 在Vue组件中注册插件importEditorfromtinymce/tinymce-vue;importtinymcefromtinymce/tinymce;importtinymce/themes/silver;importtinymce/plugins/image;importtinymce/plugins/link;importtinymce/plugins/table;// 导入我们的插件import./plugins/docimport/plugin;exportdefault{components:{Editor},data(){return{content:,editorInit:{height:500,menubar:true,plugins:[advlist autolink lists link image charmap print preview anchor,searchreplace visualblocks code fullscreen,insertdatetime media table paste code help wordcount,docimport// 注册我们的插件],toolbar:undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help | docimport,external_plugins:{docimport:/path/to/your/plugin.js// 插件路径},// 其他配置...}};},mounted(){tinymce.init({});}};后端实现 (PHP)1. 文件导入处理import.phpyour-access-key-id,accessKeySecretyour-access-key-secret,endpointoss-cn-hangzhou.aliyuncs.com,bucketyour-bucket-name,domainhttps://your-bucket-name.oss-cn-hangzhou.aliyuncs.com];// 检查文件上传if(!isset($_FILES[file])){echojson_encode([successfalse,message没有上传文件]);exit;}$file$_FILES[file];$allowedTypes[application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/pdf];if(!in_array($file[type],$allowedTypes)){echojson_encode([successfalse,message不支持的文件类型]);exit;}// 临时保存文件$tempDirsys_get_temp_dir();$tempFiletempnam($tempDir,docimport);move_uploaded_file($file[tmp_name],$tempFile);// 根据文件类型调用不同的处理程序$result[];switch($file[type]){caseapplication/msword:caseapplication/vnd.openxmlformats-officedocument.wordprocessingml.document:$resultprocessWord($tempFile,$ossConfig);break;caseapplication/vnd.ms-excel:caseapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet:$resultprocessExcel($tempFile,$ossConfig);break;caseapplication/vnd.ms-powerpoint:caseapplication/vnd.openxmlformats-officedocument.presentationml.presentation:$resultprocessPowerpoint($tempFile,$ossConfig);break;caseapplication/pdf:$resultprocessPdf($tempFile,$ossConfig);break;}// 删除临时文件unlink($tempFile);echojson_encode($result);// 处理Word文档functionprocessWord($filePath,$ossConfig){// 这里使用PHPWord或其它库处理Word文档// 实际项目中可以使用composer安装phpoffice/phpword// 示例代码实际需要更复杂的处理// 简单示例将Word转换为HTML实际项目中需要更完善的转换$html导入的Word文档内容这里是转换后的内容...;// 模拟提取图片$images[];for($i1;$i3;$i){$images[][base64base64_encode(file_get_contents(path/to/sample-image.jpg)),nameimage.$i..jpg,tempUrldata:image/jpeg;base64,...// 临时URL];}return[successtrue,html$html,images$images];}// 处理Excel文档functionprocessExcel($filePath,$ossConfig){// 类似Word处理使用PhpSpreadsheet等库$html导入的Excel表格示例表格;return[successtrue,html$html];}// 处理PowerPoint文档functionprocessPowerpoint($filePath,$ossConfig){// 处理PPT提取每页为图片或HTML$html导入的PPT内容幻灯片1内容;return[successtrue,html$html];}// 处理PDF文档functionprocessPdf($filePath,$ossConfig){// 使用pdftotext或其它库提取文本和图片$html导入的PDF内容PDF文本内容...;return[successtrue,html$html];}?2. 图片上传处理upload.phpyour-access-key-id,accessKeySecretyour-access-key-secret,endpointoss-cn-hangzhou.aliyuncs.com,bucketyour-bucket-name,domainhttps://your-bucket-name.oss-cn-hangzhou.aliyuncs.com];// 检查输入$inputjson_decode(file_get_contents(php://input),true);if(!isset($input[image])||!isset($input[name])){echojson_encode([successfalse,message无效的输入]);exit;}// 解码图片数据$imageDatabase64_decode(preg_replace(#^data:image/\w;base64,#i,,$input[image]));if(!$imageData){echojson_encode([successfalse,message图片解码失败]);exit;}// 生成唯一文件名$extensionpathinfo($input[name],PATHINFO_EXTENSION);$fileNameuploads/.uniqid()...$extension;// 上传到阿里云OSStry{$ossClientnew\OSS\OssClient($ossConfig[accessKeyId],$ossConfig[accessKeySecret],$ossConfig[endpoint]);$ossClient-putObject($ossConfig[bucket],$fileName,$imageData);$imageUrl$ossConfig[domain]./.$fileName;echojson_encode([successtrue,url$imageUrl]);}catch(Exception$e){echojson_encode([successfalse,message上传失败: .$e-getMessage()]);}?3. 微信公众号内容处理wechat.phpyour-access-key-id,accessKeySecretyour-access-key-secret,endpointoss-cn-hangzhou.aliyuncs.com,bucketyour-bucket-name,domainhttps://your-bucket-name.oss-cn-hangzhou.aliyuncs.com];// 检查输入$inputjson_decode(file_get_contents(php://input),true);if(!isset($input[html])){echojson_encode([successfalse,message无效的输入]);exit;}$html$input[html];// 清理微信公众号HTML$domnewDOMDocument();$dom-loadHTML(.$html);$dom-encodingUTF-8;// 提取主要内容去除不必要的标签$resultHtml;$body$dom-getElementsByTagName(body)-item(0);if($body){// 处理图片$images$body-getElementsByTagName(img);$imageList[];foreach($imagesas$img){$src$img-getAttribute(src);if(strpos($src,data:image)0){// base64图片需要上传$imageDatabase64_decode(preg_replace(#^data:image/\w;base64,#i,,$src));if($imageData){$extensionjpg;// 默认jpg$fileNamewechat/.uniqid()...$extension;try{$ossClientnew\OSS\OssClient($ossConfig[accessKeyId],$ossConfig[accessKeySecret],$ossConfig[endpoint]);$ossClient-putObject($ossConfig[bucket],$fileName,$imageData);$imageUrl$ossConfig[domain]./.$fileName;$img-setAttribute(src,$imageUrl);$imageList[][tempUrl$src,base64base64_encode($imageData),namebasename($fileName)];}catch(Exception$e){// 上传失败保留原图}}}}// 处理公式简单示例实际需要更复杂的处理$resultHtml$dom-saveHTML();// 清理微信特有的类名和样式$resultHtmlpreg_replace(/class[^]*mp-weixin[^]*/i,,$resultHtml);$resultHtmlpreg_replace(/style[^]*/i,,$resultHtml);}echojson_encode([successtrue,html$resultHtml,images$imageList]);?部署说明前端部署将插件文件放在Vue项目的public/plugins/docimport/目录下在TinyMCE初始化配置中正确设置external_plugins路径后端部署将PHP文件放在服务器可访问的目录安装必要的PHP扩展如fileinfo通过Composer安装阿里云OSS SDKcomposer require alibabacloud/sdk配置正确的OSS访问权限数据库本插件不需要额外的数据库表如果需要记录导入日志可以创建简单的日志表预算控制这个方案完全在680元预算内主要成本是阿里云OSS的存储费用几乎可以忽略开发时间约20-30小时按杭州IT行业平均时薪计算远低于预算使用了开源库TinyMCE、PHPWord等没有额外授权费用群内推广兄弟们这个插件我已经开发得差不多了测试通过后就可以打包成开箱即用的版本。欢迎大家加群223813913一起交流可以代理销售这个插件可以合作开发类似的企业级插件可以分享外包项目资源新人加群送1-99元红包推荐客户成交提成20%这钱赚得轻松又舒服注意事项实际项目中需要根据需求调整文档转换的精度对于复杂的公式和样式可能需要更专业的文档处理库生产环境需要添加更多的错误处理和日志记录需要考虑安全性如文件类型验证、大小限制等这个方案应该能满足客户的需求特别是对高龄用户友好的一键粘贴功能能显著提高内容发布效率。大家如果有更好的实现方式或者遇到问题欢迎在群里讨论复制插件安装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转换成图片上传到服务器中。上传网络图片一键自动上传网络图片。下载示例点击下载完整示例