首页 > 其他分享 >如何将word图片粘贴到百度UEditor里面

如何将word图片粘贴到百度UEditor里面

时间:2023-06-12 15:14:35浏览次数:44  
标签:UEditor word 控件 text base64 wordpaster items var 粘贴

图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码
目前限chrome浏览器使用
首先以um-editor的二进制流保存为例:
打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。
加入下面的代码:

//判断剪贴板的内容是否包含文本

//首先解释一下为什么要判断文本是不是为空

//在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

//为了兼容4种格式的情况,做了如下的判断

//如下代码:e.originalEvent.clipboardData.items获得剪贴板的内容

//当粘贴了文本之后text是不为空的,同时也会返回当前文本的图片类型

//如果有文字的话不做任何的处理,如果只粘贴图片的话文本一定是空的,包括复制的桌面图片或者截图的图片

var text = e.originalEvent.clipboardData.getData("text");

if(text == ""){

    var items=e.originalEvent.clipboardData.items;

     for (var i = 0, len = items.length; i < len; i++) {

        var item = items[i];

       if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

         

              var blob = item.getAsFile();

              getBase64(blob, function( base64 ) {

              //sendAndInsertImage(base64,me); 上传到服务器

               setBase64Image(base64,me);

              });

              //阻止默认事件, 避免重复添加;

              e.originalEvent.preventDefault();

             };

        }

}

两个方法:

//执行插入图片的操作

function setBase64Image(base64,editor){

    editor.execCommand('insertimage', {src: base64,_src: base64});

}

//获得base64

function  getBase64(blob, callback) {

    var a = new FileReader();

    a.onload = function(e) {callback(e.target.result);};

    a.readAsDataURL(blob);

};

效果展示:

​编辑

​编辑

​编辑

 

视频教程:

 

动易SiteFactory 4.7整合,动易SiteFactory 6.2整合,dedecms 5.7-ueditor整合,dedecms 5.7-ckeditor3x整合,帝国CMS-ueditor整合,帝国CMS-ckeditor4x整合,dokuwiki整合,Windows控件安装,macOS控件安装,linux-deb控件安装,linux-rpm控件安装,uos控件安装,linux-银河麒麟控件安装,

 

更多详细资料可以参考这篇文章:

详细思路及源码

示例下载:

wordpaster-vue3-cli-ueditor1.5wordpaster-vue-ueditor1.5wordpaster-asp.net-ueditor1.5xwordpaster-php-ueditor1xwordpaster-jsp-ueditor1x​

 

标签:UEditor,word,控件,text,base64,wordpaster,items,var,粘贴
From: https://www.cnblogs.com/songsu/p/17475045.html

相关文章

  • Java:使用poi操作docx的word文档
    packagecom.aomen.java;importorg.apache.poi.openxml4j.exceptions.InvalidFormatException;importorg.apache.poi.util.Units;importorg.apache.poi.xwpf.usermodel.*;importorg.apache.xmlbeans.XmlCursor;importorg.openxmlformats.schemas.wordprocessingml.......
  • Luogu P3435 [POI2006] OKR-Periods of Words
    [POI2006]OKR-PeriodsofWords题面翻译对于一个仅含小写字母的字符串\(a\),\(p\)为\(a\)的前缀且\(p\nea\),那么我们称\(p\)为\(a\)的proper前缀。规定字符串\(Q\)(可以是空串)表示\(a\)的周期,当且仅当\(Q\)是\(a\)的proper前缀且\(a\)是\(Q+Q\)的前缀......
  • 启动word时总是弹出Microsoft Visual Basic运行错误提示框,解决方法如下
    1、启动word,找到加载项名称为:NEWebWordAddin.dotm,类型应该时是模版版,看其所在位置,我的电脑显示位置是:C:\Users\18308\AppData\Local\Packages\Microsoft.Office.Desktop_8wekyb3d8bbwe\LocalCache\Roaming\Microsoft\Word2、为保持原有数据   进入该位置,将STARTUP改成bak_......
  • 如何将CHATGPT 整合到WordPress上使用
    CHATGPT出来有一段时间了,一直想琢磨怎么在我们网站上使用CHATGPT, https://www.3cseller.com/ 使用WordPressAjax请求https://api.openai.com/v1/chat/completions返回openai结果,做一个chatgpt在线问答功能  functionopenai_chat_request(){ $content=$......
  • UVA1401 Remember the Word
    思路首先有一个比较朴素的DP就是记\(f_i\)为\(s\)的从第\(i\)个字符开始到字符串结尾的划分方案数,记模板串的集合为\(T\),\(s\)从第\(i\)个字符开始到字符串结尾的子串为\(s(i)\),那么不难写出方程:\[f_i=\sumf_{i+\operatorname{len}(t)}[t\inT\landt是s(......
  • 【Sword系列】第七届全国残疾人职业技能大赛样题-网络安全-特殊后门
    前言ICMP是Internet控制消息协议(InternetControlMessageProtocol)的简称,它是TCP/IP协议族的一个子协议。ICMP协议主要用于在IP网络中传递控制信息。它提供了一种在IP网络中进行错误报告、网络拓扑探测和诊断等功能的机制。通常情况下,ICMP包是由网络设备(如路由器)生成并发送给主机......
  • 去掉或修改页面底部的「动力源自 Bravada & WordPress.」字样
    打开:……/wp-content/themes/bravada/includes/core.php定位至位于第400行左右的「bravada_master_footer」处;做相应修改。参考:https://blog.csdn.net/qq_45790384/article/details/127335865......
  • Python+pywin32批量转换Word文件为PDF文件
    代码功能:把当前文件夹中多个Word文件批量转换为PDF文件技术原理:代码实际上是调用了Word的“导出”功能,模拟了手工转换的操作并实现了自动化,要求已正确安装Python扩展库pywin32和Office2007以上版本。......
  • 【Sword系列】第七届全国残疾人职业技能大赛样题-网络安全-数据包里有甜甜圈哦~
    前言Wireshark(前称Ethereal)是一个网络数据包分析软件。网络数据包分析软件的功能是截取网络数据包,并尽可能显示出最为详细的网络数据包数据。在过去,网络数据包分析软件是非常昂贵,或是专门属于营利用的软件,Wireshark的出现改变了这一切。在GNU通用公共许可证的保障范围底下,用户可以......
  • Python实现Excel与Word文件中表格数据的导入导出
    问题描述:Excel文件“测试文件.xlsx”中有3个worksheet,每个worksheet中的行数和列数都不相同,要求把这3个worksheet中的数据导入到一个Word文件中,每个worksheet生成一个单独的表格,每个表格的样式不同。在Excel和Word之间,是支持表格直接复制的,如果数量少,可以直接复制,如果多的话,可以参......