首页 > 其他分享 >ueditor导入本地word并编辑

ueditor导入本地word并编辑

时间:2022-09-19 18:11:04浏览次数:88  
标签:ueditor word text base64 导入 blob 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);

};

效果展示:

编辑


详细内容可参考这篇文章:ueditor word图片上传

讨论群:223813913

 

标签:ueditor,word,text,base64,导入,blob,items,var,图片
From: https://www.cnblogs.com/zyzzz/p/16708579.html

相关文章

  • ueditor(JSP版)如何实现word文档的导入和下载功能
    ​ ueditor粘贴不能粘贴word中的图片是一个很头疼的问题,在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴,因为这个需求头疼了半个月,因为前端方面因为安......
  • oracle使用imp按照用户导入数据
    oracle导入imp命令 最常用的     imp  name/password@IP:1521/orcl[库]file="c:\1.dmp"full=yignore=y。例:imp abc/[email protected]:1521/orcl file......
  • word中公式乱码
    今天一打开word,公式全都乱码,又打开了别的word文件还是乱码,不经的心头一阵!!!具体情况如下:  解决方法:将 文件>选项>高级>显示域代码而非阈值取消勾选(在显示文档内容)......
  • ckeditor粘贴word文档图片的技术
    ​图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,......
  • Java复制Word文档
    MicrosoftWord提供了许多易于使用的文档操作工具,同时也提供了丰富的功能集供创建复杂的文档使用。在使用的时候,你可能需要复制一个文档里面的内容到另一个文档。本文介绍......
  • ckeditor粘贴word文档图片的实例解析.
    ​ 在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper。通过知乎提供的思路找到粘......
  • 怎么把word文件插入到公众号文章中
    怎么把word文件插入到公众号文章中呢?相信,这是很多公众号运营师经常会遇到的情境。因为,在日常的公众号运营中,他们经常需要在文章中添加一些附件,比如:登记表、申请表、报名表......
  • Oracle 19c pdb 导入11g数据库
    Oracle19c导入11g数据库一、创建pdb(1)使用oracle用户登录到cdb#su–oracle#sqlplus/assysdba;  附oracle19c基本操作:①查看容器名称,必须为cdb$root,需要在......
  • ckeditor粘贴word文档图片的示例
    ​ 在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper。通过知乎提供的思路找到粘......
  • ckeditor粘贴word文档图片的实例
    ​如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-......