苏州网站建设自助建站收费打开百度网站建设

苏州网站建设自助建站收费,打开百度网站建设,WordPress用户中心开发,福田区住房和建设局官方网站【企业级富文本编辑器功能扩展项目纪实——从需求分析到阿里云OSS集成】 2023年X月X日 周X 上海徐汇区 一、需求拆解与核心约束 作为前端工程师#xff0c;近期接到客户紧急需求#xff1a;在现有Vue2 wangEditor4的后台系统中新增三大功能#xff1a; Word粘贴增强…【企业级富文本编辑器功能扩展项目纪实——从需求分析到阿里云OSS集成】2023年X月X日 周X 上海·徐汇区一、需求拆解与核心约束作为前端工程师近期接到客户紧急需求在现有Vue2 wangEditor4的后台系统中新增三大功能Word粘贴增强保留格式表格/字体/颜色并自动上传图片至阿里云OSS微信公众号抓取解析HTML并替换图片为OSS链接多格式导入支持Word/Excel/PPT/PDF全格式导入保持排版一致性技术边界条件前端Vue2-cli wangEditor4需兼容IE11及国产浏览器后端PHP 7.4 Laravel现有架构不可重构存储阿里云OSS需预留多云接口预算≤2万元含第三方服务采购二、技术选型与风险评估1. 富文本编辑器插件方案对比方案优势风险成本年费wangEditor扩展原生支持Vue2API兼容性好需自行开发Office解析模块¥0开源TinyMCE企业版官方支持Word导入年费¥1.8万超出预算¥18,000wangEditor插件轻量级但需适配wangEditor样式冲突风险高¥3,000决策选择wangEditor扩展方案理由预算内可控仅需采购阿里云OSS流量包客户现有系统已使用wangEditor4学习成本为零2. 关键技术验证清单IE11兼容性阿里云OSS签名// PHP后端生成STS临时凭证安全控制$credentialsnewCredentials(ak,sk);$stsClientnewStsClient($credentials);$assumeRoleResponse$stsClient-assumeRole([RoleArnacs:ram::1234567890:role/oss-upload-role,RoleSessionNamesession-name,DurationSeconds900]);三、核心功能开发实现1. 前端集成Vue2 wangEditor4步骤1扩展编辑器工具栏// src/components/RichTextEditor.vueimportwangEditorfromwangEditorexportdefault{mounted(){consteditorwangEditor.create(#editor_id,{items:[fontname,fontsize,|,wordpaste,wechatpaste,// 自定义按钮insertfile],afterCreate:(){// 绑定自定义按钮事件this.bindCustomButtons(editor)}})},methods:{bindCustomButtons(editor){// Word粘贴处理editor.cmd.do(wordpaste,(){consthtmlwindow.clipboardData.getData(Text)// IE兼容this.processWordContent(html).then(cleanHtml{editor.insertHtml(cleanHtml)})})// 微信公众号内容处理editor.cmd.do(wechatpaste,async(){consturlprompt(请输入公众号文章URL:)constresawaitfetch(/api/proxy/wechat?url${encodeURIComponent(url)})consthtmlawaitres.text()editor.insertHtml(awaitthis.processWechatContent(html))})},asyncprocessWordContent(html){// 使用DOMParser解析Word HTMLconstdocnewDOMParser().parseFromString(html,text/html)constimagesdoc.querySelectorAll(img[src^file://])// 处理本地粘贴的图片for(letimgofimages){try{constblobawaitthis.fileToBlob(img.src)constformDatanewFormData()formData.append(file,blob,word-image.png)constresawaitfetch(/api/upload,{method:POST,body:formData})constossUrlawaitres.text()img.srcossUrl}catch(e){console.error(图片上传失败:,e)img.remove()}}returndoc.body.innerHTML},fileToBlob(url){returnnewPromise((resolve){fetch(url).then(resres.blob()).then(resolve)})}}}步骤2IE11兼容性处理// 修复IE下clipboardData.getData(HTML)失效问题if(window.clipboardData!window.clipboardData.getData(HTML)){Object.defineProperty(window.clipboardData,getData,{value:(type){if(typeHTML)returndocument.selection.createRange().htmlTextreturn}})}2. 后端实现PHP Aliyun OSS文件上传接口// api/upload.phprequire_oncevendor/autoload.php;useOSS\OssClient;useOSS\Core\OssException;header(Content-Type: text/plain);try{$ossClientnewOssClient(accessKeyId,accessKeySecret,endpoint);$objectuploads/.uniqid()._.basename($_FILES[file][name]);$ossClient-uploadFile(bucket-name,$object,$_FILES[file][tmp_name]);echohttps://bucket-name.oss-cn-hangzhou.aliyuncs.com/.$object;}catch(OssException$e){http_response_code(500);echo上传失败: .$e-getMessage();}微信公众号代理服务// api/proxy/wechat.php$url$_GET[url];$htmlfile_get_contents($url);// 替换公众号图片为代理URL$htmlpreg_replace_callback(/]src([^])[^]*/i,function($matches){$imgUrl$matches[1];if(strpos($imgUrl,mmbiz.qpic.cn)!false){// 生成带签名的临时访问URLreturn;}return$matches[0];},$html);echo$html;3. 多格式导入实现Apache POI替代方案使用Mammoth.js处理Word文档// 处理.docx文件导入asyncfunctionimportDocx(file){constarrayBufferawaitfile.arrayBuffer()constresultmammoth.extractRawText({arrayBuffer})// 解析结果中的图片result.messages.forEach(msg{if(msg.typewarningmsg.message.includes(image)){// 提取图片并上传至OSS}})returnresult.value}PDF转HTML方案# 使用pdf.js服务端渲染需部署Node服务# 安装依赖npminstallpdfjs-dist# PHP调用Node服务示例$pdfHtmlshell_exec(node pdf2html.js .escapeshellarg($pdfPath));四、成本控制与优化OSS费用优化使用低频访问类型存储历史文件成本降低40%启用CDN加速减少回源流量第三方服务替代放弃商业版Office解析库采用Word/ExcelSheetJS Community EditionPPTpptxjsPDFpdf.js pdf-lib最终成本构成项目费用阿里云OSS流量包¥1,200域名SSL证书¥0开发人力成本¥15,000总计¥16,200五、交付与验收标准功能验收在IE11中成功导入含20张图片的Word文档微信公众号图片抓取准确率≥95%性能指标50MB PPT导入耗时≤8秒OSS上传并发支持20QPS交付物完整Vue组件源码含IE兼容补丁PHP后端接口文档《阿里云OSS安全配置指南》项目总结关键突破通过DOMParser正则表达式实现轻量级Word样式解析遗留问题复杂表格样式在IE11下存在1px偏移已记录在JIRA知识沉淀形成《前端信创环境兼容性手册》纳入公司知识库附项目Git仓库地址已同步至公司Confluence权限申请路径IT部→前端组→2023-Q3-wangEditor扩展复制插件文件安装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转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例