核心内容摘要
实时手机检测-通用模型MySQL数据存储方案设计
富文本编辑器集成文档导入与图片自动上传功能开发记录作为一名技术开发人员我独立搭建了一个网站目前正着手解决富文本编辑器中粘贴 Word 图片以及支持多种文档导入且图片自动上传至服务器的问题。
以下是我详细的查找过程与开发记录。
需求明确一功能需求粘贴功能在百度富文本编辑器 UEditor 中粘贴 Word 内容时其中的图片能够自动上传到服务器服务器再将图片保存到对象存储如阿里云、华为云等。
文档导入功能支持 Word、Excel、PPT、PDF 文档导入到富文本编辑器中导入后图片同样自动上传至服务器并保存到对象存储同时要保留文档的样式包括字体、字号、颜色等信息。
二技术环境前端框架vue2 - cli富文本编辑器百度富文本编辑器 UEditor后端语言PHP数据库MySQL服务器阿里云
查找解决方案一在线资源搜索我首先在各大技术论坛如 CSDN、掘金、开源社区GitHub、Gitee以及搜索引擎百度、谷歌上进行了广泛搜索。
输入的关键词包括“UEditor 粘贴 Word 图片自动上传”“UEditor 导入 Word Excel PPT PDF 文档”“vue2 UEditor 文档导入图片上传”等。
在搜索过程中我发现了一些相关的讨论和技术文章但大多只是提到了部分功能的实现思路缺乏完整的代码示例和详细的实现步骤。
例如有些文章介绍了如何通过修改 UEditor 的配置来实现粘贴图片的自动上传但没有涉及到多种文档导入以及图片上传到对象存储的具体操作。
二加入交流群为了能更直接地与同行交流经验我加入了 QQ 群 223813913。
在群里我向大家描述了目前遇到的问题和需求得到了不少热心同行的回应。
有同行建议我参考 UEditor 官方文档中关于自定义插件和后端接口的部分通过编写自定义插件来实现文档导入和图片上传的功能。
还有同行分享了他们之前类似项目的开发经验提醒我注意文档格式解析的兼容性问题以及图片上传过程中的安全性问题。
开发过程一前端部分vue2 - cli UEditor
引入 UEditor在 vue2 项目中引入 UEditor我按照官方文档的步骤进行了配置。
首先下载 UEditor 的压缩包解压后将相关文件放置在项目的 public 目录下。
然后在 vue 组件中通过动态创建 script 标签的方式引入 UEditor 的 JS 文件并初始化编辑器。
export default { mounted() { this.initUEditor(); }, methods: { initUEditor() { const script document.createElement(script); script.src /ueditor/ueditor.config.js; script.onload () { const ueScript document.createElement(script); ueScript.src /ueditor/ueditor.all.min.js; ueScript.onload () { this.ue UE.getEditor(editor); this.bindPasteEvent(); }; document.body.appendChild(ueScript); }; document.body.appendChild(script); }, bindPasteEvent() { this.ue.addListener(ready, () { this.ue.addListener(afterPaste, this.handlePaste); }); }, handlePaste(html) { // 处理粘贴内容提取图片并上传 console.log(粘贴内容:, html); // 这里可以添加代码来解析 html 中的图片并触发上传 } } };
处理粘贴事件为了实现粘贴 Word 图片自动上传我监听了 UEditor 的afterPaste事件。
在事件处理函数中需要对粘贴的 HTML 内容进行分析提取出其中的图片元素。
由于 Word 粘贴过来的图片可能是以 base64 编码的形式存在也可能是以外部链接的形式存在因此需要进行分类处理。
handlePaste(html){constparsernewDOMParser();constdocparser.parseFromString(html,text/html);constimagesdoc.querySelectorAll(img);images.forEach(img{if(img.src.startsWith(data:image)){// 处理 base64 编码的图片this.uploadBase64Image(img.src);}else{// 处理外部链接图片这里可能需要根据实际情况进一步处理比如判断是否为合法链接等console.log(外部链接图片:,img.src);}});},uploadBase64Image(base64Data){// 提取 base64 数据中的图片类型和纯数据部分constmatchesbase64Data.match(/^data:(.);base64,(.)$/);if(matchesmatches.length
{constmimeTypematches[1];constimageDatamatches[2];// 调用后端接口上传图片this.$http.post(/api/uploadImage,{imageData:imageData,mimeType:mimeType}).then(response{console.log(图片上传成功:,response.data);// 替换编辑器中的图片链接为上传后的链接// 这里需要根据实际情况找到编辑器中对应的图片元素并进行替换}).catch(error{console.error(图片上传失败:,error);});}}
文档导入功能对于文档导入功能由于 UEditor 本身并不直接支持多种文档的导入因此需要借助第三方库来进行文档解析。
我选择了 mammoth.js 来解析 Word 文档对于 Excel、PPT 和 PDF考虑使用相应的解析库如 SheetJS 解析 Excelpptxjs 解析 PPTpdf.js 解析 PDF。
以 Word 文档导入为例我在前端添加了一个文件上传按钮当用户选择 Word 文件后使用 FileReader 读取文件内容然后调用 mammoth.js 进行解析将解析后的 HTML 内容插入到 UEditor 中。
import mammoth frommammoth; export default { methods: { handleFileChange(event) { const file event.target.files[0]; if (file) { const reader new FileReader(); reader.onload (e) { const arrayBuffer e.target.result; mammoth.extractRawText({ arrayBuffer: arrayBuffer }) .then(result { // 这里只是简单获取文本内容实际需要获取包含样式的 HTML // 更完整的做法是使用 mammoth.convertToHtml mammoth.convertToHtml({ arrayBuffer: arrayBuffer }) .then(htmlResult { this.ue.setContent(htmlResult.value); // 处理导入文档中的图片如果有 this.processImportedImages(htmlResult.value); }); }) .catch(error { console.error(文档解析失败:, error); }); }; reader.readAsArrayBuffer(file); } }, processImportedImages(html) { // 类似于粘贴事件处理中的图片处理逻辑 // 解析 html 中的图片并上传 } } };二后端部分PHP
图片上传接口我编写了一个 PHP 接口来处理前端上传的图片数据。
接口接收到图片的 base64 编码数据和图片类型后将 base64 数据解码为二进制数据然后上传到阿里云对象存储OSS。
Base64 解码失败]);exit;}try{// 创建 OssClient 实例$ossClientnewOssClient($accessKeyId,$accessKeySecret,$endpoint);// 生成图片文件名$fileNameuniqid()...pathinfo(parse_url($mimeType,PHP_URL_PATH),PATHINFO_EXTENSION);// 上传图片到 OSS$ossClient-putObject($bucket,$fileName,$binaryData);// 返回图片的 OSS 访问链接$objectUrlhttps://.$bucket...$endpoint./.$fileName;echojson_encode([url$objectUrl]);}catch(OssException$e){echojson_encode([error$e-getMessage()]);}?
文档导入相关接口预留对于文档导入功能后端可能需要提供一些辅助接口例如处理文档解析后的数据、存储文档相关信息到 MySQL 数据库等。
目前这部分功能还在进一步完善中。
遇到的问题与解决方案一图片上传失败在开发过程中遇到了图片上传失败的问题。
经过排查发现是由于阿里云 OSS 的权限配置不正确导致的。
解决方法是检查并修改 OSS 的 Bucket 权限确保 PHP 脚本有足够的权限进行文件上传操作。
二文档样式丢失在导入 Word 文档时发现部分样式如字体、字号、颜色等丢失。
这是因为使用的文档解析库mammoth.js在解析过程中对样式的支持不够完善。
解决方案是寻找更强大的文档解析库或者对解析后的 HTML 进行二次处理手动添加丢失的样式。
五、
总结与展望通过这段时间的查找和开发我已经基本实现了富文本编辑器中粘贴 Word 图片自动上传以及 Word 文档导入的功能但 Excel、PPT 和 PDF 文档的导入功能还在进一步完善中。
在开发过程中与同行的交流和分享给了我很多帮助让我能够更快地解决问题。
接下来我将继续优化文档导入功能确保各种文档的样式能够完整保留并提高图片上传的稳定性和性能。
同时我也会将开发过程中的经验整理成文档分享给更多的开发者希望能为大家提供一些参考和帮助。
复制插件目录引入插件文件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转换成图片上传到服务器中。
上传网络图片下载示例点击下载完整示例