首页 > 其他分享 >tinymce实现从word直接粘贴并自动上传图片

tinymce实现从word直接粘贴并自动上传图片

时间:2023-09-17 09:44:07浏览次数:41  
标签:word success tinymce e7% powerpaste 上传 粘贴

背景介绍:
tinymce是一款优秀的富文本编辑器。
powerpaste是其一款收费插件,能实现word内容无缝粘贴入网页的tinymce中,可保留word的格式以及自动将word中的图片上传至服务器端。

使用说明:
我默认你们都能在官网下载到tinymce,鉴于部分同学是通过npm安装的,要注意了:npm安装的不行!!!!不能用powerpaste!!!!
要用这个插件,先从官网下载tinymce!!下载地址:https://www.tiny.cloud/get-tiny/self-hosted/
语言包下载:https://www.tiny.cloud/get-tiny/language-packages/

然后,把我给你们发的插件解压
解压后我们放到tinymce模块的plugins文件夹下。

 

然后!在你webpack的index.html中,通过script标签引入tinymce.min.js!你不是用webpack也没关系,反正通过标签引入就是了!

 

接着tinymce初始化时

  tinymce.init({

    selector: '#tinymce', // css选择器,和jquery的选择器一个道理,建议直接用id

    language: 'zh_CN', // 需要在官网自己下载一个全局的langs包。同时我提供的powerpaste本身自带一个langs包里面含中文,所以可以100%支持中文。

    plugins: [

      'powerpaste', // plugins中,用powerpaste替换原来的paste

      //...

    ],

    powerpaste_word_import: 'propmt',// 参数可以是propmt, merge, clear,效果自行切换对比

    powerpaste_html_import: 'propmt',// propmt, merge, clear

    powerpaste_allow_local_images: true,

    paste_data_images: true,

    images_upload_handler: function (blobInfo, success, failure) {

      // 这个函数主要处理word中的图片,并自动完成上传;

      // ajaxUpload是自己定义的一个函数;在回调中,记得调用success函数,传入上传好的图片地址;

      // blobInfo.blob() 得到图片的file对象;

      ajaxUpload(blobInfo.blob()).then((data) => {

         // 上传成功后,调用success函数传入图片地址

         success(data.uploadedImageUrl)

       })

     },

    // tinymce的其他配置参数

  })

你可以进一步封装成组件等,但已经不是本文讨论的范畴了。

 

参考文章:http://blog.ncmem.com/wordpress/2023/09/17/tinymce%e5%ae%9e%e7%8e%b0%e4%bb%8eword%e7%9b%b4%e6%8e%a5%e7%b2%98%e8%b4%b4%e5%b9%b6%e8%87%aa%e5%8a%a8%e4%b8%8a%e4%bc%a0%e5%9b%be%e7%89%87/

欢迎入群一起讨论

 

 

标签:word,success,tinymce,e7%,powerpaste,上传,粘贴
From: https://www.cnblogs.com/songsu/p/17707854.html

相关文章

  • 如何在word的表格内部中插入endnote文献
    第0步:在endnote中修改设置,设置为为每一节单独创造参考文献,且不同节之间参考文献标号不连续第1步:在要插入的表格后面插入单独一行,保证是“正文”第2步:在空行后插入“分节符(连续)”注意!!必须保证“分节符(连续)”和表格中间至少有一行空行第3步:插入参考文献,参考文献会显示在表......
  • 解决wangEditor从word复制粘贴图片,带有页眉页脚的问题
    话不多说,直接贴代码。rtf数据能提取到页眉页脚图片的原因:提取Word文档中包含的所有图像数据,包括页眉和页脚中的图像数据。这是因为RTF(RichTextFormat)是一种标记语言,可以在其中嵌入文本、图像和其他媒体类型的数据。在Word中,页眉和页脚的内容也可以通过RTF格式进行描述......
  • 帝国CMS 7.5编辑器从WORD中粘贴过来无法保留格式和图片的解决办法
     1.配置过滤js文件 首先打开 \e\admin\ecmseditor\infoeditor\plugins\pastefromword\filter\default.js 在文件的最后部分又如下代码(修改前的代码),也可以搜索CKEDITOR.cleanWord进行定位。 修改前: CKEDITOR.cleanWord=function(a,c){       CKEDITOR......
  • 帝国CMS导入Word文档
    帝国CMS导入Word文档——轻松实现网站内容批量编辑在当前信息爆炸的时代,网站是企业展示自身形象和产品的窗口,常常需要进行内容的更新和修改。而对于那些内容较多、更新频繁的网站来说,每次手动修改都会耗费大量的时间和精力。帝国CMS导入Word文档的功能应运而生,为网站管理员提供了......
  • [粘贴]github-redis-rdb-cli
    redis-rdb-cliAtoolthatcanparse,filter,split,mergerdbandanalyzememoryusageoffline.Itcanalsosync2redisdataandallowuserdefinethereownsinkservicetomigrateredisdatatosomewhere.  ChatwithauthorContracttheauthorchen.b......
  • UEditor的word图片转存-Electron篇
    electorn是用nodejs写桌面端应用,详细的可从官方文档上获得:Electron文档完整的应用地址为:Word-Image-Handler在这里需要实现如下几点:1.在子进程中跑nodejs服务2.实现自动更新3.可唤起Nodejs服务因为,我这里需要跑一个nodejs应用,跑在子进程中,直接上一个大神的项目地址:Electro......
  • word安装(ppt、excel),以及word的常用设置
    一、安装word(ppt、excel)0、关闭电脑的所有杀毒软件等到激活的时候,注意断开网络!!!一般,白嫖的时候,激活都要记得断网,杀毒软件是从下载就得关闭了!1、卸载卸载:把电脑所有和办公office相关的软件卸载了,比如:word、ppt、excel、onenote、outlook等等[具体参考下图],注意还有wps也要一起卸载......
  • Navicat连接Mysql数据显示2059 - authentication plugin ‘caching_sha2_password‘的
    安装Mysql8.0,使用navicat登录时显示如下错误提示 错误原因:MySQL新版本(8以上版本)的用户登录账户加密方式是【caching_sha2_password】,Navicat不支持这种用户登录账户加密方式。解决办法:1.打开MySQL命令行客户端 2.输入登录密码登录,查看加密方式,命令:showvariableslike'd......
  • UEditor的word图片转存-UEditor篇
    在UEditor中需要做两件事,第一,在一开始标记Img,为每一个需要转存的图片设置一个UUID,得到本地地址和UUID,第二,在上传结束后,根据UUID找到img元素,替换属性src1.标记imgwordimage插件的inputRule中会对输入的数据流进行处理,这里默认会把src是本地的img转成一张图片(提示使用wordimage工......
  • CKEditor从word粘贴问题
    在ckeditor/config.js的CKEDITOR.editorConfig=function(config){}函数中添加如下配置//是否强制复制来的内容去除格式plugins/pastetext/plugin.jsconfig.forcePasteAsPlainText=false//不去除//是否使用等标签修饰或者代替从word文档中粘贴过来的内容plugins/paste......