陕西建设网站官网专业企业建站系统

陕西建设网站官网,专业企业建站系统,西安做网站的工资怎么样啊,昆山网站制作企业网站后台管理系统增强功能开发方案 项目背景 作为河南某国企的项目负责人#xff0c;我负责的企业网站后台管理系统需要新增以下功能#xff1a; 在Web编辑器工具栏中增加Word粘贴功能和Word文档导入功能实现微信公众号内容粘贴(自动下载公众号图片并上传到服务器)支持…企业网站后台管理系统增强功能开发方案项目背景作为河南某国企的项目负责人我负责的企业网站后台管理系统需要新增以下功能在Web编辑器工具栏中增加Word粘贴功能和Word文档导入功能实现微信公众号内容粘贴(自动下载公众号图片并上传到服务器)支持多格式文档导入(Word,Excel,PPT,PDF)并保留原始格式确保在信创国产化环境下的兼容性技术选型与要求前端技术栈框架Vue2/Vue3/React兼容编辑器wangEditor浏览器兼容包括IE8在内的所有浏览器以及信创国产浏览器操作系统兼容Windows/macOS/Linux/RedHat/CentOS/Ubuntu/中标麒麟/银河麒麟/统信UOSCPU架构x86(Intel,AMD,兆芯,海光)/arm(鲲鹏,飞腾)/龙芯(mips,LoongArch)后端技术栈框架JSP开发工具Eclipse JEE/MyEclipse/IntelliJ IDEA数据库MySQL服务器阿里云ECS(CentOS/RedHat)云存储阿里云OSS(支持私有云/公有云/混合云)特殊要求买断产品源代码无授权限制预算98万以内提供5个以上央企/国企/政府项目合作资料提供编译打包发布培训指导解决方案经过评估我推荐采用以下开源组件进行定制开发前端实现方案1. wangEditor插件开发// word-paste-plugin.jsimport{DomElement}fromwangeditorclassWordPastePlugin{constructor(editor){this.editoreditorthis.pasteHandlerthis.handlePaste.bind(this)}// 初始化插件init(){consteditorthis.editor editor.config.customPastethis.pasteHandler// 添加工具栏按钮editor.menus.extend(wordPaste,{class:WordPasteMenu,config:{editor}})}// 处理粘贴事件handlePaste(editor,event){constclipboardDataevent.clipboardData||window.clipboardDataif(!clipboardData)return// 处理Word粘贴内容if(clipboardData.types.includes(Files)||clipboardData.types.includes(text/html)){event.preventDefault()this.handleWordPaste(clipboardData,editor)}}// 处理Word粘贴内容asynchandleWordPaste(clipboardData,editor){consthtmlclipboardData.getData(text/html)constfilesclipboardData.files// 1. 处理图片上传constuploadedImagesawaitthis.uploadImages(files)// 2. 处理HTML内容constcleanedHtmlthis.cleanWordHtml(html,uploadedImages)// 3. 插入到编辑器editor.cmd.do(insertHTML,cleanedHtml)}// 上传图片asyncuploadImages(files){constuploadedImages[]for(leti0;ifiles.length;i){constfilefiles[i]if(file.type.startsWith(image/)){constformDatanewFormData()formData.append(file,file)try{constresponseawaitfetch(/api/upload,{method:POST,body:formData})constresultawaitresponse.json()uploadedImages.push({original:file.name,url:result.url})}catch(error){console.error(图片上传失败:,error)}}}returnuploadedImages}// 清理Word生成的HTMLcleanWordHtml(html,images){// 创建一个临时div来解析HTMLconsttempDivdocument.createElement(div)tempDiv.innerHTMLhtml// 1. 移除Word特有的垃圾代码this.removeWordGarbage(tempDiv)// 2. 替换图片引用this.replaceWordImages(tempDiv,images)// 3. 保留基本样式this.preserveBasicStyles(tempDiv)returntempDiv.innerHTML}// 更多清理方法...}// 工具栏菜单classWordPasteMenu{constructor(editor){this.editoreditorthis.$elemDomElement.createElement()this.typeclick}clickHandler(){// 点击时提示用户直接粘贴Word内容alert(请直接从Word中复制内容然后在此处粘贴)}tryChangeActive(){// 激活状态}}exportdefaultWordPastePlugin2. 微信公众号内容粘贴处理// wechat-paste-plugin.jsclassWechatPastePlugin{constructor(editor){this.editoreditor}init(){document.addEventListener(paste,this.handleWechatPaste.bind(this))}asynchandleWechatPaste(event){constclipboardDataevent.clipboardData||window.clipboardDataif(!clipboardData)return// 检测是否是微信公众号内容consthtmlclipboardData.getData(text/html)if(htmlhtml.includes(mp.weixin.qq.com)){event.preventDefault()awaitthis.processWechatContent(html)}}asyncprocessWechatContent(html){consteditorthis.editorconsttempDivdocument.createElement(div)tempDiv.innerHTMLhtml// 1. 提取所有图片URLconstimgElementstempDiv.querySelectorAll(img[data-src])constimageUrlsArray.from(imgElements).map(imgimg.getAttribute(data-src))// 2. 下载并上传图片constuploadedImages[]for(consturlofimageUrls){try{constimageDataawaitthis.downloadImage(url)constuploadedawaitthis.uploadImage(imageData)uploadedImages.push(uploaded)}catch(error){console.error(图片处理失败:,error)}}// 3. 替换图片URLimgElements.forEach((img,index){if(uploadedImages[index]){img.srcuploadedImages[index].url img.removeAttribute(data-src)}})// 4. 清理并插入内容this.cleanWechatContent(tempDiv)editor.cmd.do(insertHTML,tempDiv.innerHTML)}asyncdownloadImage(url){constresponseawaitfetch(url)returnawaitresponse.blob()}asyncuploadImage(blob){constformDatanewFormData()formData.append(file,blob,wechat-image.jpg)constresponseawaitfetch(/api/upload,{method:POST,body:formData})returnawaitresponse.json()}cleanWechatContent(element){// 移除微信公众号特有的跟踪代码等consttrackerselement.querySelectorAll([id*js_content], [class*rich_media])trackers.forEach(elel.removeAttribute(id))trackers.forEach(elel.removeAttribute(class))}}exportdefaultWechatPastePlugin3. 文档导入功能// doc-import-plugin.jsclassDocImportPlugin{constructor(editor){this.editoreditor}init(){// 添加导入按钮consteditorthis.editor editor.menus.extend(docImport,{class:DocImportMenu,config:{editor,onImport:this.handleFileImport.bind(this)}})}asynchandleFileImport(file){consteditorthis.editor// 显示加载状态editor.showProgressBar(50)try{// 1. 上传文件到服务器constformDatanewFormData()formData.append(file,file)constresponseawaitfetch(/api/doc/import,{method:POST,body:formData})constresultawaitresponse.json()// 2. 处理返回的HTML内容if(result.html){editor.cmd.do(insertHTML,result.html)}// 3. 处理返回的图片URL替换if(result.imageMap){this.replaceImportedImages(result.imageMap)}editor.hideProgressBar()}catch(error){console.error(文档导入失败:,error)editor.hideProgressBar()alert(文档导入失败请检查文件格式)}}replaceImportedImages(imageMap){// 在编辑器内容中查找临时图片引用并替换为实际上传后的URL// 实现略...}}classDocImportMenu{constructor(editor){this.editoreditorthis.$elemDomElement.createElement()this.typeclick// 设置文件输入事件constfileInputthis.$elem.querySelector(#docImportInput)fileInput.addEventListener(change,(e){if(e.target.files.length0){this.config.onImport(e.target.files[0])e.target.value// 允许重复选择同一文件}})}clickHandler(){this.$elem.querySelector(#docImportInput).click()}tryChangeActive(){// 激活状态}}exportdefaultDocImportPlugin后端实现方案(JSP)1. 文件上传接口// FileUploadServlet.javaWebServlet(/api/upload)MultipartConfigpublicclassFileUploadServletextendsHttpServlet{privatestaticfinalStringOSS_ENDPOINTyour-oss-endpoint;privatestaticfinalStringOSS_BUCKETyour-oss-bucket;privatestaticfinalStringOSS_ACCESS_KEYyour-access-key;privatestaticfinalStringOSS_SECRET_KEYyour-secret-key;protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{response.setContentType(application/json);response.setCharacterEncoding(UTF-8);try{PartfilePartrequest.getPart(file);if(filePartnull||filePart.getSize()0){response.getWriter().write({\success\:false,\message\:\未接收到文件\});return;}// 获取文件信息StringfileNamegetFileName(filePart);StringfileExtfileName.substring(fileName.lastIndexOf(.)1).toLowerCase();// 生成唯一文件名StringuniqueNameUUID.randomUUID().toString().fileExt;// 上传到OSSStringfileUrluploadToOSS(filePart.getInputStream(),uniqueName);// 返回结果response.getWriter().write(String.format({\success\:true,\url\:\%s\,\original\:\%s\},fileUrl,fileName));}catch(Exceptione){response.getWriter().write(String.format({\success\:false,\message\:\%s\},e.getMessage()));}}privateStringgetFileName(Partpart){StringcontentDisppart.getHeader(content-disposition);String[]itemscontentDisp.split(;);for(Strings:items){if(s.trim().startsWith(filename)){returns.substring(s.indexOf()2,s.length()-1);}}return;}privateStringuploadToOSS(InputStreaminputStream,StringobjectName)throwsException{// 创建OSSClient实例OSSossClientnewOSSClientBuilder().build(OSS_ENDPOINT,OSS_ACCESS_KEY,OSS_SECRET_KEY);try{// 上传文件流ossClient.putObject(OSS_BUCKET,objectName,inputStream);// 生成访问URL根据配置决定是否生成带签名的URL// 这里简单返回对象Key前端可以根据需要拼接完整URLreturnobjectName;}finally{ossClient.shutdown();}}}2. 文档导入处理接口// DocImportServlet.javaWebServlet(/api/doc/import)MultipartConfigpublicclassDocImportServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{response.setContentType(application/json);response.setCharacterEncoding(UTF-8);try{PartfilePartrequest.getPart(file);if(filePartnull||filePart.getSize()0){response.getWriter().write({\success\:false,\message\:\未接收到文件\});return;}// 获取文件信息StringfileNamegetFileName(filePart);StringfileExtfileName.substring(fileName.lastIndexOf(.)1).toLowerCase();// 临时保存文件PathtempFileFiles.createTempFile(docimport-,.fileExt);try(InputStreamfileContentfilePart.getInputStream()){Files.copy(fileContent,tempFile,StandardCopyOption.REPLACE_EXISTING);}// 根据文件类型处理DocImportResultresult;switch(fileExt){casedoc:casedocx:resultprocessWordDocument(tempFile.toString());break;casexls:casexlsx:resultprocessExcelDocument(tempFile.toString());break;caseppt:casepptx:resultprocessPowerPointDocument(tempFile.toString());break;casepdf:resultprocessPdfDocument(tempFile.toString());break;default:thrownewException(不支持的文件格式);}// 返回处理结果response.getWriter().write(newGson().toJson(result));}catch(Exceptione){response.getWriter().write(String.format({\success\:false,\message\:\%s\},e.getMessage()));}}privateDocImportResultprocessWordDocument(StringfilePath)throwsException{// 使用Apache POI或docx4j处理Word文档// 这里简化为示例代码DocImportResultresultnewDocImportResult();result.setSuccess(true);// 1. 提取文本内容StringBuilderhtmlnewStringBuilder();html.append();html.append(导入的Word文档标题);html.append(这里是文档的正文内容...);html.append();result.setHtml(html.toString());// 2. 提取图片并上传MapimageMapnewHashMap();// 假设从文档中提取了图片并上传imageMap.put(image1.tmp,image1.jpg);imageMap.put(image2.tmp,image2.jpg);result.setImageMap(imageMap);returnresult;}// 其他文档处理方法...privatestaticclassDocImportResult{privatebooleansuccess;privateStringhtml;privateMapimageMap;// getters and setterspublicbooleanisSuccess(){returnsuccess;}publicvoidsetSuccess(booleansuccess){this.successsuccess;}publicStringgetHtml(){returnhtml;}publicvoidsetHtml(Stringhtml){this.htmlhtml;}publicMapgetImageMap(){returnimageMap;}publicvoidsetImageMap(MapimageMap){this.imageMapimageMap;}}}数据库设计-- 文件上传记录表CREATETABLEfile_upload_record(idbigint(20)NOTNULLAUTO_INCREMENT,file_namevarchar(255)NOTNULLCOMMENT原始文件名,file_pathvarchar(512)NOTNULLCOMMENT存储路径或对象Key,file_sizebigint(20)NOTNULLCOMMENT文件大小(字节),file_typevarchar(50)NOTNULLCOMMENT文件类型,upload_timedatetimeNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT上传时间,uploadervarchar(100)DEFAULTNULLCOMMENT上传人,storage_typevarchar(20)NOTNULLCOMMENT存储类型(OSS/本地等),md5varchar(64)DEFAULTNULLCOMMENT文件MD5,PRIMARYKEY(id),KEYidx_file_path(file_path),KEYidx_upload_time(upload_time))ENGINEInnoDBDEFAULTCHARSETutf8mb4COMMENT文件上传记录表;-- 文档导入记录表CREATETABLEdoc_import_record(idbigint(20)NOTNULLAUTO_INCREMENT,original_file_namevarchar(255)NOTNULLCOMMENT原始文件名,file_typevarchar(20)NOTNULLCOMMENT文件类型,import_timedatetimeNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT导入时间,importervarchar(100)DEFAULTNULLCOMMENT导入人,statustinyint(4)NOTNULLCOMMENT状态(0-处理中,1-成功,2-失败),error_msgtextDEFAULTNULLCOMMENT错误信息,PRIMARYKEY(id),KEYidx_import_time(import_time))ENGINEInnoDBDEFAULTCHARSETutf8mb4COMMENT文档导入记录表;集成与部署方案前端集成在main.js中注册插件importEditorfromwangeditorimportWordPastePluginfrom./plugins/word-paste-pluginimportWechatPastePluginfrom./plugins/wechat-paste-pluginimportDocImportPluginfrom./plugins/doc-import-plugin// 注册插件Editor.use(WordPastePlugin)Editor.use(WechatPastePlugin)Editor.use(DocImportPlugin)// 创建编辑器实例consteditornewEditor(#editor-container)editor.create()在Vue组件中使用export default { mounted() { this.initEditor() }, methods: { initEditor() { const editor new this.$editor(#editor-container) editor.config.uploadImgServer /api/upload editor.config.uploadFileName file editor.config.showLinkImg false editor.config.showFullScreen true // 初始化插件 editor.plugins.get(wordPaste).init() editor.plugins.get(wechatPaste).init() editor.plugins.get(docImport).init() editor.create() this.editor editor } }, beforeDestroy() { if (this.editor) { this.editor.destroy() } } }后端部署打包部署使用Maven或Gradle构建WAR包部署到Tomcat或直接作为独立服务运行配置数据库连接和OSS参数配置示例(context.xml):信创环境兼容性处理浏览器兼容使用Polyfill处理IE8等旧浏览器检测浏览器特性并降级处理// polyfill.jsimportcore-js/stableimportregenerator-runtime/runtime// 检测IEif(navigator.userAgent.indexOf(MSIE)-1||!!document.documentMode){// IE特定处理window.isIEtrue// 加载IE专用polyfillimport(ie-array-find-polyfill).then((){console.log(IE polyfill loaded)})}// 检测信创浏览器constisQianxinnavigator.userAgent.includes(Qianxin)constisLotusnavigator.userAgent.includes(Lotus)if(isQianxin||isLotus){// 信创浏览器特定处理console.log(Running in Qianxin or Lotus browser)}操作系统检测// os-detect.jsexportfunctiondetectOS(){constuserAgentnavigator.userAgent.toLowerCase()if(userAgent.includes(windows nt)){returnwindows}elseif(userAgent.includes(mac os x)){returnmacos}elseif(userAgent.includes(linux)){if(userAgent.includes(centos))returncentosif(userAgent.includes(redhat))returnredhatif(userAgent.includes(ubuntu))returnubuntuif(userAgent.includes(uos))returnuosif(userAgent.includes(kylin)){if(userAgent.includes(mips)||userAgent.includes(loongarch)){returnkylin-loongson}else{returnkylin}}returnlinux}returnunknown}项目交付与培训源代码交付完整的前后端源代码详细的开发文档API接口文档数据库设计文档培训内容系统架构与设计理念核心功能模块解析插件开发指南部署与维护手册常见问题解决方案支持服务3个月免费技术支持定期版本更新紧急问题响应通道预算与采购建议预算分配源代码买断费用98万定制开发费用预计20万(如有额外需求)总预算118万(建议控制在98万内)采购建议选择有政府项目经验的供应商要求提供信创环境兼容性认证确保源代码知识产权清晰考虑长期维护成本总结本方案提供了完整的Word粘贴、文档导入和微信公众号内容处理功能实现满足以下要求前端框架兼容Vue2/Vue3/React后端基于JSP开发工具兼容Eclipse/MyEclipse/IntelliJ IDEA支持信创国产化环境图片处理使用二进制存储支持后期迁移到对象存储提供完整的源代码和文档满足政府和国企的信息安全要求该方案可以直接集成到现有系统中不影响现有业务流程用户使用简单方便通过工具栏按钮即可完成所有操作。复制插件文件安装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转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例