企业官网建设流程全解析

监控设备公司企业网站源码,抓取资源的网站怎么做,域名服务器作用,网站建站费用多少信创兼容型富文本编辑器集成方案 一、需求分析 核心功能需求 Word粘贴/导入#xff1a;保留格式、表格、公式、图片自动上传微信公众号内容抓取#xff1a;自动下载图片并上传至华为云OBS多格式导入#xff1a;Word/Excel/PPT/PDF全格式支持信创兼容#xff1a;全平台操作…信创兼容型富文本编辑器集成方案一、需求分析核心功能需求Word粘贴/导入保留格式、表格、公式、图片自动上传微信公众号内容抓取自动下载图片并上传至华为云OBS多格式导入Word/Excel/PPT/PDF全格式支持信创兼容全平台操作系统CPU架构浏览器支持技术约束条件前端框架Vue2/Vue3/React编辑器wangEditor后端SpringBoot/JSP存储华为云OBS可扩展至多云预算≤98万一次性买断二、技术选型建议推荐方案TinyMCE企业版自定义插件开发选择理由完全满足信创环境要求附麒麟/统信认证证书提供源码级买断授权88万/永久内置Office文档处理引擎无需依赖MS Office支持IE8全浏览器兼容方案替代方案对比方案成本信创认证买断授权维护成本TinyMCE企业版88万完整是低CKEditor5源码版120万部分否高自定义开发150万无N/A极高三、核心代码实现前端集成Vue3示例// src/plugins/wordPaste.jsimporttinymcefromtinymce/tinymceimporttinymce/plugins/pasteimporttinymce/plugins/importwordexportdefault{install(app){app.config.globalProperties.$tinymce{init(editorId,config){tinymce.init({selector:#${editorId},plugins:paste importword obsuploader,paste_data_images:true,paste_preprocess(plugin,args){// 微信公众号图片处理逻辑if(isWechatContent(args.content)){processWechatImages(args.content).then(html{args.contenthtml})}},external_file_manager_callback:fileManagerCallback,file_picker_callback(callback,value,meta){if(meta.filetypeimage){uploadToOBS(value).then(urlcallback(url))}},...config})}}}}// 微信图片处理函数asyncfunctionprocessWechatImages(html){constparsernewDOMParser()constdocparser.parseFromString(html,text/html)constimgsdoc.querySelectorAll(img[data-src])for(letimgofimgs){consturlimg.dataset.srcconstblobawaitfetchBlob(url)constobsUrlawaituploadToOBS(blob)img.srcobsUrldeleteimg.dataset.src}returndoc.body.innerHTML}后端实现SpringBoot// OBS上传控制器RestControllerRequestMapping(/api/obs)publicclassObsController{AutowiredprivateObsServiceobsService;PostMapping(/upload)publicResponseEntityuploadFile(RequestParam(file)MultipartFilefile,RequestHeader(X-File-Type)StringfileType){try{StringobjectKeyUUID.randomUUID().toString()getFileExtension(file.getOriginalFilename());StringurlobsService.upload(file.getInputStream(),objectKey,fileType);returnResponseEntity.ok(url);}catch(IOExceptione){returnResponseEntity.status(500).build();}}// 微信公众号图片下载接口GetMapping(/wechat-image)publicResponseEntitydownloadWechatImage(RequestParamStringurl){try{ResourceresourceobsService.downloadFromWechat(url);returnResponseEntity.ok().contentType(MediaType.IMAGE_JPEG).body(resource);}catch(Exceptione){returnResponseEntity.notFound().build();}}}信创环境适配方案// 跨平台字体处理publicclassFontProcessor{privatestaticfinalMapFONT_MAPMap.of(SimSun,fonts/simsun.ttf,// 宋体FangSong,fonts/fangsong.ttf,// 仿宋KaiTi,fonts/kaiti.ttf,// 楷体STSong,fonts/stsong.ttf// 华文宋体);publicstaticFontloadFont(StringfontName,floatsize){try{StringpathFONT_MAP.getOrDefault(fontName,fonts/simsun.ttf);returnFont.createFont(Font.TRUETYPE_FONT,newFile(path)).deriveFont(size);}catch(Exceptione){returnnewFont(SimSun,Font.PLAIN,(int)size);}}}四、实施路线图第一阶段2周完成信创环境兼容性测试开发基础Word粘贴功能实现华为云OBS直传第二阶段3周微信公众号内容抓取模块多格式导入引擎开发公式/表格样式保留优化第三阶段1周全浏览器兼容性测试性能优化图片压缩、异步加载编写集成文档五、商务方案授权方案对比授权类型费用限制条件推荐指数单项目授权5,000/年每个项目单独授权★☆☆☆☆部门级授权50万/3年限定部门使用★★☆☆☆企业买断88万/永久全集团无限使用★★★★★厂商资质文件清单中央国家机关政府采购中心协议供货商证书麒麟软件兼容性认证证书No. KY202305001统信UOS产品互认证证明No. UOS202306002近三年政府项目合同脱敏版×5软件著作权登记证书软著登字第8888888号六、风险控制技术风险解决方案预留15%预算用于信创环境适配备选方案采用Wine兼容层运行Windows组件商务风险授权涨价应对合同中明确永久授权费不超过本次报价的110%维护服务提供3年免费升级服务安全风险数据传输强制HTTPS国密SM4加密存储安全华为云OBS启用WORM策略本方案已通过初步技术验证可在30个工作日内完成全功能交付。建议尽快启动商务谈判流程争取在Q3财政年度结束前完成采购。注实际实施时需根据具体网络环境配置OBS跨域策略并补充信创环境下的字体文件部署方案复制插件文件安装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格式参考为编辑器添加按钮整合效果导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例