TINYMCE实现导入WORD并将内容显示到编辑器中

于 2024-04-01 16:11:40 发布
阅读量181 收藏
点赞数 1
文章标签： 导入word文档 导入word图文 导入word文件 ueditor导入word ueditor导入pdf 百度ue导入word 百度ue导入pdf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alisky119/article/details/137237002
版权

主要的方案就是提供一个转换接口，转换接口使用RESTful协议，这样的话兼容性更好一点，其它的平台用起来的话更方便简单一点，而且测试起来也方便。

现有项目需要为TinyMCE增加导入word文件的功能，导入后word文件里面的图片自动上传到服务器中，word里面的文本样式保留

用户一般在发新闻和发文章时用到，算是一个高频使用功能，用户体验上来讲确实是很好，和以前的发新闻或者发文章的体验比起来要方便许多，用户用的更爽。

示例下载

https://gitee.com/xproer/zyoffice-tinymce5

主要步骤如下：

1.上传zyoffice文件夹

2.在页面中引入组件文件，初始化组件

3.添加插件

4.添加到工具栏

效果

全武凌(荆门泽优)
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件powerpaste源码
01-29
以vue为例说明：将tinymce下载后放到static目录下，powerpaste放到\static\tinymce\plugins目录下，在index.html中引入tinymce.min.js。代码参数配置：tinymce.init({powerpaste_word_import: 'propmt',powerpaste_...
TinyMCE富文本编辑器导出为word文档（JS实现）
11-16
应用JS实现，TinyMCE富文本编辑器导出为word文档，可解决图片，表格的导出，这是实现的demo，可以直接取用
tinymce编辑器导入docx、doc格式Word文档完整版
一切如你的博客
07-17 2421
tinymce编辑器导入docx、doc格式Word文档完整版
tinymce实现导入word并将内容显示到编辑器中
weixin_52041354的博客
10-26 902
"wordPathFormat": "/public/uploads/word/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */在ueditor\ueditor.all.js文件中UE.plugin.register('simpleupload', function (){})下方新增如下方法。"wordAllowFiles": [".docx"] /* 仅支持docx格式的word */
tinymce集成tp-importword插件实现导入word功能
qq_22481167的专栏
02-21 754
插件可以在下载，注意把plugin.min.js和langs里面的文件都下载下来。
tinymce回显问题
LL22222222的博客
10-10 147
tinymce回显
kindeditor实现导入word并将内容显示到编辑器中
weixin_52041354的博客
11-03 214
3.基础配置 powerpaste_allow_local_images: true, //powerpaste允许黏贴 powerpaste_word_import: "clean", // 是否保留word粘贴样式 clean | merge （具体可查看官方文档）powerpaste_word_import: "clean", //powerpaste黏贴的样式获取方式。skin_url: "/static/skins/ui/oxide", // tinymce UI引入。
TinyMCE编辑器(HTML编辑器) v4.1.5 中文官方版.zip
03-26
功能配置灵活简单（两行代码就可以将编辑器嵌入网页中），支持AJAX。另一特点是加载速度非常快，如果你的服务器采用的脚本语言是 php，那还可以进一步优化。最重要的是，TinyMCE是一个根据LGPL license发布的自由...
tinymce 富文本编辑器导出插件
11-01
tinymce 富文本编辑器导出插件， 支持导出word 导出pdf,可通过配置修改下载文件名称
vue项目中使用tinymce编辑器的步骤详解
01-19
Tinymce富文本也是一款很流行编辑器  把文件放在static下，然后在index.html文件中引入这个文件 [removed][removed] <tinymce height=200 ref=editor v-model=editForm.fdcNote></tinymce>  在其他子文件中引入...
WordPress高级自定义布局的内容编辑器(TinyMCE)模板
01-20
今天就为大家介绍下Wordpress高级自定义布局的内容编辑器模板的制作技巧，要做到所见即所得，那么我们得在内容编辑器内自定义添加预设内容和排版布局，再结合我们样式表就可以轻易的实现这个功能。 创
tinymce富文本编辑器中文语言包
10-15
tinymce中文语言包，在项目中引入后，需要设置初始化参数：language: 'zh_CN'即可。
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
主要介绍了在 Vue 项目中引入 tinymce 富文本编辑器的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
TinyMCE富文本编辑器资源包
最新发布
02-23
TinyMCE 版本 6 富文本编辑器资源包
简体中文tinymce编辑器插件下载
11-02
简体中文tinymce编辑器插件下载 简体中文tinymce编辑器插件下载
(vue)富文本Tinymce + vue 配置与内容回显
nyf_unknow的博客
12-25 2003
【代码】(vue)富文本Tinymce + vue 配置与内容回显。
tinymce富文本编辑器的使用（回显问题）
weixin_49861016的博客
09-28 746
tinymce富文本编辑器组件。tinymce富文本编辑器的使用。
TinyMCE实现word上传
lsn690607887的博客
04-11 796
主要解决了上传图文word的图片上传问题
vue tinymce将内容导出为word上传到服务器，并回显完整代码
05-25
可以使用JSZip和FileSaver.js库来将tinymce编辑器中的内容导出为Word文档，并上传到服务器。下面是完整的代码： HTML部分： ```html <!-- 引入JSZip和FileSaver.js库 --> <script src="https://cdn.jsdelivr.net/npm/jszip/dist/jszip.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script> <!-- 编辑器部分 --> <textarea id="myTextarea"></textarea> <!-- 导出按钮 --> <button id="exportBtn">导出为Word</button> ``` JS部分： ```javascript // 获取编辑器内容 var content = tinymce.get('myTextarea').getContent(); // 创建Word文档 var zip = new JSZip(); var folder = zip.folder("word"); var xmlContent = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n' + '<w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">\n' + ' <w:body>\n' + ' <w:p>\n' + ' <w:r>\n' + ' <w:t>' + content + '</w:t>\n' + ' </w:r>\n' + ' </w:p>\n' + ' </w:body>\n' + '</w:document>'; folder.file("document.xml", xmlContent); var zipContent = zip.generate({type: "blob"}); // 下载Word文档 document.getElementById("exportBtn").addEventListener("click", function() { saveAs(zipContent, "document.docx"); }); // 上传Word文档到服务器 var formData = new FormData(); formData.append("file", zipContent, "document.docx"); fetch("/upload", { method: "POST", body: formData }).then(response => { console.log(response); }).catch(error => { console.error(error); }); ``` 注意：在上传文件到服务器时，需要将文件内容放到FormData中，并设置文件名和文件类型，然后使用fetch或XMLHttpRequest进行上传。具体的上传方式需要根据你的后端框架来确定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值