首页 > 其他分享 >百度UEditor可以如何直接复制word的图文内容到编辑器中?

百度UEditor可以如何直接复制word的图文内容到编辑器中?

时间:2023-08-11 17:12:35浏览次数:49  
标签: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/17623456.html

相关文章

  • CKEditor可以如何直接复制word的图文内容到编辑器中?
    ​ 在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper。通过知乎提供的思路找到粘贴的原理,通过TheViper找到粘贴图片的方法。其原理为一下步骤:监听粘贴事件;【用于插入图片】获取光标位置;【......
  • KindEditor可以如何直接复制word的图文内容到编辑器中?
    ​ 如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>......
  • FCKEditor可以如何直接复制word的图文内容到编辑器中?
    ​  自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能......
  • nltk.wordnet.WordNetLemmatizer().lemmatize()表示什么意思
    在自然语言处理中,词形还原是将一个单词的各种变体(例如时态、语态、数等)还原为其基本词形或词根形式的过程。NLTK(自然语言工具包)是一个常用的Python库,它提供了用于文本处理和语言分析的工具。nltk.wordnet.WordNetLemmatizer()是NLTK中的一个词形还原器类,用于将单词转换为它们......
  • 使用Word批量制作会议台签
    简介:使用Word的域功能,从Excel中导入姓名列表,快速生成会议台签软件:Word2016,Excel2016Step1:新建ExcelSheet1,在A1输入标题“名单”;输入一列名字,保存为.xls(注意:两个字的名字,在中间加2个空格)Step2:1)新建Word,选择:邮件-开始邮件合并-普通Word文档2)选择:邮件-选择收件人-使用......
  • reactnative ignite App + wordpress後台CMS 詳細案例
    1.0入門篇WordPress-Plugin-Boilerplate-Tutorial更为简洁的架构方案ReactNativeElements开发环境&生成项目&虚拟机调试&本地生成APK档&虚拟机运行APK档 2.0Ignite框架 Ignite是reactnative里最最齊全的軍火庫。https://github.com/infinitered/ignite 3......
  • PageOffice——实现Word文档指定内容可编辑,其他内容只读
    pageoffice实现word文件部分区域可编辑依赖word中的书签1.文件在本地打开将需要用户在线编辑的内容设置为数据区域DateRegion(数据区域:word中以PO_开头的书签)注意:书签的两个中括号是office本地设置的,如果不显示可以手动设置一下2.使用pageoffice的表单提交模式docSubmitForm打......
  • 利用Python批量替换多个word文档中的指定
    需求最近有一个项目方案,涉及到2000多个文档。之前公司有相关案例,但是需要将2000多个文档中的特殊名称改成现有项目,单独操作需要打开每个文档区搜索替换,费事费力。通过python中对文档的操作进行批量替换。方案思路1.获取所有需要替换的word文件路径defgetdocreplace(path):......
  • dimp V8:[WARNING]login fail, check your username and password, and check the serv
    在进行某个项目的性能测试时,我们选择了达梦8作为使用的数据库。前期是在一台功能测试环境的达梦数据库服务上创建用于压力测试的业务数据。后续将数据库导出,并导入一台专门做性能测试的高性能服务器(部署同样版本的达梦8),执行数据库文件导入操作时遇到了问题。以下是出现的错误......
  • xhEditor可以如何直接复制word的图文内容到编辑器中?
    ​ 当前功能基于PHP,其它语言流程大抵相同。大概流程:1.将docx文件上传到服务器中2.使用PHPoffice/PHPword实现将word转换为HTML3.将HTML代码返回并赋值到编辑器中 1编辑器配置修改1.1新增上传wordjson配置在ueditor\php\config.json中新增如下配置:     /*......