☰

企业官网建设流程全解析

首页 / 建站日记 / 企业官网建设流程全解析
wangEditor支持Latex公式转MathML兼容导入
2026/6/7 14:51:35 网站建设 项目流程

企业网站后台管理系统增强功能开发方案

项目背景

作为河南某国企的项目负责人，我负责的企业网站后台管理系统需要新增以下功能：

  1. 在Web编辑器工具栏中增加Word粘贴功能和Word文档导入功能
  2. 实现微信公众号内容粘贴(自动下载公众号图片并上传到服务器)
  3. 支持多格式文档导入(Word,Excel,PPT,PDF)并保留原始格式
  4. 确保在信创国产化环境下的兼容性

技术选型与要求

前端技术栈

  • 框架：Vue2/Vue3/React兼容
  • 编辑器：wangEditor
  • 浏览器兼容：包括IE8在内的所有浏览器，以及信创国产浏览器
  • 操作系统兼容：Windows/macOS/Linux/RedHat/CentOS/Ubuntu/中标麒麟/银河麒麟/统信UOS
  • CPU架构：x86(Intel,AMD,兆芯,海光)/arm(鲲鹏,飞腾)/龙芯(mips,LoongArch)

后端技术栈

  • 框架：JSP
  • 开发工具：Eclipse JEE/MyEclipse/IntelliJ IDEA
  • 数据库：MySQL
  • 服务器：阿里云ECS(CentOS/RedHat)
  • 云存储：阿里云OSS(支持私有云/公有云/混合云)

特殊要求

  1. 买断产品源代码，无授权限制
  2. 预算98万以内
  3. 提供5个以上央企/国企/政府项目合作资料
  4. 提供编译打包发布培训指导

解决方案

经过评估，我推荐采用以下开源组件进行定制开发：

前端实现方案

1. wangEditor插件开发
// word-paste-plugin.jsimport{DomElement}from'wangeditor'classWordPastePlugin{constructor(editor){this.editor=editorthis.pasteHandler=this.handlePaste.bind(this)}// 初始化插件init(){consteditor=this.editor editor.config.customPaste=this.pasteHandler// 添加工具栏按钮editor.menus.extend('wordPaste',{class:WordPasteMenu,config:{editor}})}// 处理粘贴事件handlePaste(editor,event){constclipboardData=event.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){consthtml=clipboardData.getData('text/html')constfiles=clipboardData.files// 1. 处理图片上传constuploadedImages=awaitthis.uploadImages(files)// 2. 处理HTML内容constcleanedHtml=this.cleanWordHtml(html,uploadedImages)// 3. 插入到编辑器editor.cmd.do('insertHTML',cleanedHtml)}// 上传图片asyncuploadImages(files){constuploadedImages=[]for(leti=0;i<files.length;i++){constfile=files[i]if(file.type.startsWith('image/')){constformData=newFormData()formData.append('file',file)try{constresponse=awaitfetch('/api/upload',{method:'POST',body:formData})constresult=awaitresponse.json()uploadedImages.push({original:file.name,url:result.url})}catch(error){console.error('图片上传失败:',error)}}}returnuploadedImages}// 清理Word生成的HTMLcleanWordHtml(html,images){// 创建一个临时div来解析HTMLconsttempDiv=document.createElement('div')tempDiv.innerHTML=html// 1. 移除Word特有的垃圾代码this.removeWordGarbage(tempDiv)// 2. 替换图片引用this.replaceWordImages(tempDiv,images)// 3. 保留基本样式this.preserveBasicStyles(tempDiv)returntempDiv.innerHTML}// 更多清理方法...}// 工具栏菜单classWordPasteMenu{constructor(editor){this.editor=editorthis.$elem=DomElement.createElement(``)this.type='click'}clickHandler(){// 点击时提示用户直接粘贴Word内容alert('请直接从Word中复制内容，然后在此处粘贴')}tryChangeActive(){// 激活状态}}exportdefaultWordPastePlugin
2. 微信公众号内容粘贴处理
// wechat-paste-plugin.jsclassWechatPastePlugin{constructor(editor){this.editor=editor}init(){document.addEventListener('paste',this.handleWechatPaste.bind(this))}asynchandleWechatPaste(event){constclipboardData=event.clipboardData||window.clipboardDataif(!clipboardData)return// 检测是否是微信公众号内容consthtml=clipboardData.getData('text/html')if(html&&html.includes('mp.weixin.qq.com')){event.preventDefault()awaitthis.processWechatContent(html)}}asyncprocessWechatContent(html){consteditor=this.editorconsttempDiv=document.createElement('div')tempDiv.innerHTML=html// 1. 提取所有图片URLconstimgElements=tempDiv.querySelectorAll('img[data-src]')constimageUrls=Array.from(imgElements).map(img=>img.getAttribute('data-src'))// 2. 下载并上传图片constuploadedImages=[]for(consturlofimageUrls){try{constimageData=awaitthis.downloadImage(url)constuploaded=awaitthis.uploadImage(imageData)uploadedImages.push(uploaded)}catch(error){console.error('图片处理失败:',error)}}// 3. 替换图片URLimgElements.forEach((img,index)=>{if(uploadedImages[index]){img.src=uploadedImages[index].url img.removeAttribute('data-src')}})// 4. 清理并插入内容this.cleanWechatContent(tempDiv)editor.cmd.do('insertHTML',tempDiv.innerHTML)}asyncdownloadImage(url){constresponse=awaitfetch(url)returnawaitresponse.blob()}asyncuploadImage(blob){constformData=newFormData()formData.append('file',blob,'wechat-image.jpg')constresponse=awaitfetch('/api/upload',{method:'POST',body:formData})returnawaitresponse.json()}cleanWechatContent(element){// 移除微信公众号特有的跟踪代码等consttrackers=element.querySelectorAll('[id*="js_content"], [class*="rich_media"]')trackers.forEach(el=>el.removeAttribute('id'))trackers.forEach(el=>el.removeAttribute('class'))}}exportdefaultWechatPastePlugin
3. 文档导入功能
// doc-import-plugin.jsclassDocImportPlugin{constructor(editor){this.editor=editor}init(){// 添加导入按钮consteditor=this.editor editor.menus.extend('docImport',{class:DocImportMenu,config:{editor,onImport:this.handleFileImport.bind(this)}})}asynchandleFileImport(file){consteditor=this.editor// 显示加载状态editor.showProgressBar(50)try{// 1. 上传文件到服务器constformData=newFormData()formData.append('file',file)constresponse=awaitfetch('/api/doc/import',{method:'POST',body:formData})constresult=awaitresponse.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.editor=editorthis.$elem=DomElement.createElement(``)this.type='click'// 设置文件输入事件constfileInput=this.$elem.querySelector('#docImportInput')fileInput.addEventListener('change',(e)=>{if(e.target.files.length>0){this.config.onImport(e.target.files[0])e.target.value=''// 允许重复选择同一文件}})}clickHandler(){this.$elem.querySelector('#docImportInput').click()}tryChangeActive(){// 激活状态}}exportdefaultDocImportPlugin

后端实现方案(JSP)

1. 文件上传接口
// FileUploadServlet.java@WebServlet("/api/upload")@MultipartConfigpublicclassFileUploadServletextendsHttpServlet{privatestaticfinalStringOSS_ENDPOINT="your-oss-endpoint";privatestaticfinalStringOSS_BUCKET="your-oss-bucket";privatestaticfinalStringOSS_ACCESS_KEY="your-access-key";privatestaticfinalStringOSS_SECRET_KEY="your-secret-key";protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{response.setContentType("application/json");response.setCharacterEncoding("UTF-8");try{PartfilePart=request.getPart("file");if(filePart==null||filePart.getSize()==0){response.getWriter().write("{\"success\":false,\"message\":\"未接收到文件\"}");return;}// 获取文件信息StringfileName=getFileName(filePart);StringfileExt=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();// 生成唯一文件名StringuniqueName=UUID.randomUUID().toString()+"."+fileExt;// 上传到OSSStringfileUrl=uploadToOSS(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){StringcontentDisp=part.getHeader("content-disposition");String[]items=contentDisp.split(";");for(Strings:items){if(s.trim().startsWith("filename")){returns.substring(s.indexOf("=")+2,s.length()-1);}}return"";}privateStringuploadToOSS(InputStreaminputStream,StringobjectName)throwsException{// 创建OSSClient实例OSSossClient=newOSSClientBuilder().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.java@WebServlet("/api/doc/import")@MultipartConfigpublicclassDocImportServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{response.setContentType("application/json");response.setCharacterEncoding("UTF-8");try{PartfilePart=request.getPart("file");if(filePart==null||filePart.getSize()==0){response.getWriter().write("{\"success\":false,\"message\":\"未接收到文件\"}");return;}// 获取文件信息StringfileName=getFileName(filePart);StringfileExt=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();// 临时保存文件PathtempFile=Files.createTempFile("docimport-","."+fileExt);try(InputStreamfileContent=filePart.getInputStream()){Files.copy(fileContent,tempFile,StandardCopyOption.REPLACE_EXISTING);}// 根据文件类型处理DocImportResultresult;switch(fileExt){case"doc":case"docx":result=processWordDocument(tempFile.toString());break;case"xls":case"xlsx":result=processExcelDocument(tempFile.toString());break;case"ppt":case"pptx":result=processPowerPointDocument(tempFile.toString());break;case"pdf":result=processPdfDocument(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文档// 这里简化为示例代码DocImportResultresult=newDocImportResult();result.setSuccess(true);// 1. 提取文本内容StringBuilderhtml=newStringBuilder();html.append("");html.append("导入的Word文档标题");html.append("这里是文档的正文内容...");html.append("");result.setHtml(html.toString());// 2. 提取图片并上传MapimageMap=newHashMap<>();// 假设从文档中提取了图片并上传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.success=success;}publicStringgetHtml(){returnhtml;}publicvoidsetHtml(Stringhtml){this.html=html;}publicMapgetImageMap(){returnimageMap;}publicvoidsetImageMap(MapimageMap){this.imageMap=imageMap;}}}

数据库设计

-- 文件上传记录表CREATETABLE`file_upload_record`(`id`bigint(20)NOTNULLAUTO_INCREMENT,`file_name`varchar(255)NOTNULLCOMMENT'原始文件名',`file_path`varchar(512)NOTNULLCOMMENT'存储路径或对象Key',`file_size`bigint(20)NOTNULLCOMMENT'文件大小(字节)',`file_type`varchar(50)NOTNULLCOMMENT'文件类型',`upload_time`datetimeNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT'上传时间',`uploader`varchar(100)DEFAULTNULLCOMMENT'上传人',`storage_type`varchar(20)NOTNULLCOMMENT'存储类型(OSS/本地等)',`md5`varchar(64)DEFAULTNULLCOMMENT'文件MD5',PRIMARYKEY(`id`),KEY`idx_file_path`(`file_path`),KEY`idx_upload_time`(`upload_time`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COMMENT='文件上传记录表';-- 文档导入记录表CREATETABLE`doc_import_record`(`id`bigint(20)NOTNULLAUTO_INCREMENT,`original_file_name`varchar(255)NOTNULLCOMMENT'原始文件名',`file_type`varchar(20)NOTNULLCOMMENT'文件类型',`import_time`datetimeNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT'导入时间',`importer`varchar(100)DEFAULTNULLCOMMENT'导入人',`status`tinyint(4)NOTNULLCOMMENT'状态(0-处理中,1-成功,2-失败)',`error_msg`textDEFAULTNULLCOMMENT'错误信息',PRIMARYKEY(`id`),KEY`idx_import_time`(`import_time`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COMMENT='文档导入记录表';

集成与部署方案

前端集成

  1. 在main.js中注册插件：
importEditorfrom'wangeditor'importWordPastePluginfrom'./plugins/word-paste-plugin'importWechatPastePluginfrom'./plugins/wechat-paste-plugin'importDocImportPluginfrom'./plugins/doc-import-plugin'// 注册插件Editor.use(WordPastePlugin)Editor.use(WechatPastePlugin)Editor.use(DocImportPlugin)// 创建编辑器实例consteditor=newEditor('#editor-container')editor.create()
  1. 在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() } } }

后端部署

  1. 打包部署：
  • 使用Maven或Gradle构建WAR包
  • 部署到Tomcat或直接作为独立服务运行
  • 配置数据库连接和OSS参数
  1. 配置示例(context.xml):
信创环境兼容性处理
  1. 浏览器兼容：
    • 使用Polyfill处理IE8等旧浏览器
    • 检测浏览器特性并降级处理
// polyfill.jsimport'core-js/stable'import'regenerator-runtime/runtime'// 检测IEif(navigator.userAgent.indexOf('MSIE')>-1||!!document.documentMode){// IE特定处理window.isIE=true// 加载IE专用polyfillimport('ie-array-find-polyfill').then(()=>{console.log('IE polyfill loaded')})}// 检测信创浏览器constisQianxin=navigator.userAgent.includes('Qianxin')constisLotus=navigator.userAgent.includes('Lotus')if(isQianxin||isLotus){// 信创浏览器特定处理console.log('Running in Qianxin or Lotus browser')}
  1. 操作系统检测：
// os-detect.jsexportfunctiondetectOS(){constuserAgent=navigator.userAgent.toLowerCase()if(userAgent.includes('windows nt')){return'windows'}elseif(userAgent.includes('mac os x')){return'macos'}elseif(userAgent.includes('linux')){if(userAgent.includes('centos'))return'centos'if(userAgent.includes('redhat'))return'redhat'if(userAgent.includes('ubuntu'))return'ubuntu'if(userAgent.includes('uos'))return'uos'if(userAgent.includes('kylin')){if(userAgent.includes('mips')||userAgent.includes('loongarch')){return'kylin-loongson'}else{return'kylin'}}return'linux'}return'unknown'}
项目交付与培训
  1. 源代码交付：
    • 完整的前后端源代码
    • 详细的开发文档
    • API接口文档
    • 数据库设计文档
  2. 培训内容：
    • 系统架构与设计理念
    • 核心功能模块解析
    • 插件开发指南
    • 部署与维护手册
    • 常见问题解决方案
  3. 支持服务：
    • 3个月免费技术支持
    • 定期版本更新
    • 紧急问题响应通道
预算与采购建议
  1. 预算分配：
    • 源代码买断费用：98万
    • 定制开发费用：预计20万(如有额外需求)
    • 总预算：118万(建议控制在98万内)
  2. 采购建议：
    • 选择有政府项目经验的供应商
    • 要求提供信创环境兼容性认证
    • 确保源代码知识产权清晰
    • 考虑长期维护成本
总结
本方案提供了完整的Word粘贴、文档导入和微信公众号内容处理功能实现，满足以下要求：
  1. 前端框架兼容Vue2/Vue3/React
  2. 后端基于JSP，开发工具兼容Eclipse/MyEclipse/IntelliJ IDEA
  3. 支持信创国产化环境
  4. 图片处理使用二进制存储，支持后期迁移到对象存储
  5. 提供完整的源代码和文档
  6. 满足政府和国企的信息安全要求
该方案可以直接集成到现有系统中，不影响现有业务流程，用户使用简单方便，通过工具栏按钮即可完成所有操作。
复制插件文件

安装jquery
npm install jquery
导入组件
importEfrom'wangeditor'const{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}=Eimport{WordPaster}from'../../static/WordPaster/js/w'import{zyCapture}from'../../static/zyCapture/z'import{zyOffice}from'../../static/zyOffice/js/o'
初始化组件
//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-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(){vareditor=newE('#editor');WordPaster.getInstance({//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:"http://localhost:8891/upload.aspx",License2:"",//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936ImageUrl:"http://localhost:8891{url}",//设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:"file",//提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1ImageMatch:''});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?id=82170058de824b5c86e2e666e5be319czyOffice.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.length=0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2=newE('#editor2');//挂载粘贴事件edt2.txt.eventHooks.pasteEvents.length=0;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转换成图片上传到服务器中。
上传网络图片
一键自动上传网络图片，自动下载远程服务器图片，自动上传远程服务器图片
下载示例
点击下载完整示例





标签：
网站建设
企业官网
项目流程
UI设计
前端开发














热门文章







文章分类







标签云



网站建设
响应式设计
用户体验
SEO优化
前端开发
小程序
电商平台
性能优化




















相关文章


您可能感兴趣的其他内容

















需要专业的网站建设服务？



联系我们获取免费的网站建设咨询和方案报价，让我们帮助您实现业务目标


立即咨询