核心内容摘要
pyecharts-gallery实战指南：零门槛实现高效数据可视化的创新方法
企业网站后台管理系统富文本编辑器功能扩展项目记录
项目背景与需求分析作为北京某集团企业项目负责人近期负责的项目中遇到新需求在企业网站后台管理系统文章发布模块增加 Word 粘贴和导入功能支持微信公众号内容粘贴自动下载图片并上传至服务器提供可直接安装使用的编辑器插件包集成方便且不影响现有系统功能。
具体需求如下粘贴功能支持从 Word 复制内容粘贴到网站编辑器图片自动上传至单独存储服务器后期可升级至阿里云、华为云 OBS 等对象存储图片以二进制文件存储保留文档样式表格、形状、公式、字体等。
导入功能支持导入 Word、Excel、PPT、PDF 文档保留图片和样式。
兼容性要求前端框架兼容 vue
vue
react后端兼容 SpringBoot 和 JAVA支持信创国产化环境多种操作系统、浏览器、CPU 架构。
授权与成本一次性买断产品使用授权不限授权数量预算 68 万以内避免后续涨价风险。
厂商资质软件厂商需提供至少 5 个央企、国企或政府事业单位项目合作资料合同原件、银行转账凭证、信创环境兼容认证书、软件产品著作权、营业执照、法人身份证原件。
查找与评估过程一市场调研通过搜索引擎、行业论坛、软件评测网站等渠道收集了多家提供富文本编辑器相关功能的软件厂商信息包括 TinyMCE、CKEditor、UEditor 扩展插件等。
二初步筛选根据需求排除了部分不支持信创环境、无法满足兼容性要求或授权费用超出预算的厂商。
对剩余厂商进行详细评估重点考察以下方面功能完整性是否支持 Word 粘贴和导入功能能否保留文档样式和图片自动上传。
兼容性是否支持多种前端框架、后端技术、操作系统、浏览器和 CPU 架构。
授权模式与成本是否提供一次性买断授权授权费用是否在预算范围内。
厂商资质是否能提供要求的项目合作资料和相关认证证书。
三综合评估经过筛选和评估选择了一家名为[软件厂商名称]的公司进行深入沟通。
该公司提供的富文本编辑器插件满足以下优势功能强大支持 Word 粘贴和多种文档导入功能能完美保留文档样式和图片自动上传至指定服务器。
兼容性良好支持多种前端框架和后端技术适配信创国产化环境包括多种操作系统、浏览器和 CPU 架构。
授权合理提供一次性买断授权不限授权数量授权费用在预算范围内。
资质齐全能提供要求的 5 个央企、国企或政府事业单位项目合作资料和相关认证证书。
开发过程一环境准备前端环境使用 vue2 cli 创建项目确保与现有系统前端框架兼容。
后端环境基于 SpringBoot 框架搭建后端服务配置 MySQL 数据库和华为弹性云服务器 ECS。
存储配置配置华为云对象存储服务OBS设置公有云、私有云、混合云存储策略。
二插件集成下载插件包从软件厂商处获取富文本编辑器插件包包含前端插件和后端接口文档。
前端集成将插件文件放入项目静态资源目录在 vue 项目中引入插件 CSS 和 JS 文件。
在 UEditor 配置文件中添加插件按钮配置示例代码如下// 在 UEditor 配置文件中添加插件按钮UE.registerUI(wordPasteButton,function(editor,uiName){varbtnnewUE.ui.Button({name:wordPasteButton,title:Word 粘贴,cssRules:background-position: -726px -77px;,onclick:function(){// 调用插件提供的粘贴方法editor.execCommand(wordPaste);}});editor.addListener(ready,function(){editor.registerCommand(wordPaste,{execCommand:function(){// 这里可以调用插件内部实现的具体粘贴逻辑// 实际开发中可能需要进一步封装和调用厂商提供的 APIconsole.log(执行 Word 粘贴操作);}});});returnbtn;},
;- 在 Vue 组件中初始化 UEditor 并加载配置示例代码如下import UE from ueditor; export default { mounted() { this.initEditor(); }, methods: { initEditor() { const ue UE.getEditor(editor, { // 引入插件配置 serverUrl: /api/ueditor/upload, // 后端接口地址 toolbars: [ // 其他工具栏按钮配置... [wordPasteButton] // 添加 Word 粘贴按钮 ] }); this.ue ue; } }, beforeDestroy() { if (this.ue) { this.ue.destroy(); } } };后端集成根据插件后端接口文档在 SpringBoot 项目中实现图片上传接口将图片存储至华为云 OBS。
示例代码如下importcom.obs.services.ObsClient;importcom.obs.services.ObsConfiguration;importcom.obs.services.model.PutObjectRequest;importcom.obs.services.model.PutObjectResult;importorg.springframework.beans.factory.annotation.Value;importorg.springframework.web.bind.annotation.PostMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.RestController;importorg.springframework.web.multipart.MultipartFile;importjava.io.IOException;importjava.util.UUID;RestControllerpublicclassFileUploadController{Value(${obs.endpoint})privateStringendpoint;Value(${obs.accessKey})privateStringaccessKey;Value(${obs.secretKey})privateStringsecretKey;Value(${obs.bucketName})privateStringbucketName;PostMapping(/api/ueditor/upload)publicStringuploadFile(RequestParam(upfile)MultipartFilefile)throwsIOException{// 生成唯一文件名StringfileNameUUID.randomUUID().toString()_file.getOriginalFilename();// 创建 OBS 客户端配置ObsConfigurationconfignewObsConfiguration();config.setSocketTimeout(
;config.setConnectionTimeout(
;config.setEndPoint(endpoint);// 创建 OBS 客户端ObsClientobsClientnewObsClient(accessKey,secretKey,config);// 创建上传请求PutObjectRequestrequestnewPutObjectRequest(bucketName,fileName,file.getInputStream());// 上传文件PutObjectResultresultobsClient.putObject(request);// 关闭 OBS 客户端obsClient.close();// 返回图片访问 URL这里需要根据实际 OBS 配置生成正确的 URLreturnhttps://bucketName.endpoint/fileName;}}- 在 application.properties 文件中配置 OBS 相关参数# OBS 配置 obs.endpointyour-obs-endpoint obs.accessKeyyour-access-key obs.secretKeyyour-secret-key obs.bucketNameyour-bucket-name三功能测试粘贴功能测试从 Word 复制内容粘贴到编辑器检查图片是否自动上传至服务器文档样式是否保留。
导入功能测试导入 Word、Excel、PPT、PDF 文档检查图片和样式是否正确保留。
兼容性测试在不同操作系统、浏览器和 CPU 架构环境下测试功能是否正常。
四问题修复与优化在测试过程中发现部分样式在导入时出现丢失问题与软件厂商沟通后厂商提供了样式修复补丁更新插件后问题得到解决。
同时对图片上传性能进行了优化提高了上传速度。
项目
总结通过本次项目成功在企业网站后台管理系统文章发布模块中增加了 Word 粘贴和导入功能满足了客户需求。
在项目开发过程中严格按照需求进行厂商筛选和评估确保了插件的功能完整性、兼容性和授权合理性。
集成过程中前端和后端开发人员密切配合及时解决了遇到的问题。
经过测试和优化系统功能稳定可靠为集团后续项目提供了可复用的解决方案。
后续计划持续关注软件厂商的更新和升级及时获取新功能和安全补丁。
将本次集成经验整理成文档分享给集团内其他项目组提高开发效率。
根据集团业务发展需求进一步扩展富文本编辑器功能如增加视频上传、在线协作等功能。
复制插件目录引入插件文件UEditor
1.
4.
3示例注意不要重复引入jquery如果您的项目已经引入了jq则不用再引入jq-
4在工具栏中增加插件按钮//工具栏上的所有的功能按钮和下拉框可以在new编辑器的实例时选择自己需要的重新定义toolbars:[[fullscreen,source,|,zycapture,|,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf]]初始化控件varposwindow.location.href.lastIndexOf(/);varapi[window.location.href.substr(0,pos
,asp/upload.asp].join();WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:,//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});//加载控件注意如果接口字段名称不是file请配置FileFieldName。
ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch匹配图片地址如果服务器返回的是JSON则需要通过正则匹配ImageMatch:,点击参考链接配置ImageUrl为图片地址增加域名如果服务器返回的图片地址是相对路径可通过此属性添加自定义域名。
ImageUrl:,点击查看详细教程配置SESSION如果接口有权限验证登陆验证SESSION验证请配置COOKIE。
或取消权限验证。
参考http://www.ncmem.com/doc/view.aspx?id8602DDBF62374D189725BF17367125F3效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。
Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。
导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。
导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。
上传网络图片下载示例点击下载完整示例