首页 > 其他分享 >本地图文直接复制到百度UEditor编辑器中

本地图文直接复制到百度UEditor编辑器中

时间:2023-05-08 16:12:13浏览次数:43  
标签:复制到 UEditor 控件 text base64 编辑器 整合 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 5.6整合,动易SiteFactory 6.2整合,PbootCMS整合,PHPCMS v9整合,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,控件,text,base64,编辑器,整合,items,var
From: https://www.cnblogs.com/songsu/p/17382115.html

相关文章

  • 本地图文直接复制到百度UMEditor编辑器中
    ​ 如何做到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>......
  • 本地图文直接复制到UEditor编辑器中
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接......
  • (libgdx小结)粒子编辑器
    一、初始化方法及常见的APIeffect=newParticleEffect();//初始化粒子效果类 effect.load(Gdx.files.internal("test.p"),Gdx.files.internal(""));//加载粒子编辑器类文件effect.setPosition(Position_X,Position_Y);//设置粒子的位置effect.draw(batch,Gdx.graphics.getDe......
  • 系统集成03-文本编辑器
    系统集成03-文本编辑器文本处理是操作系统对文件管理的基础操作,文本编辑器是计算机软件中的一种,主要用来编写和查看文本文件。不同的文件编辑器有不同的辅助功能。1Linux常用文本编辑器介绍文本编辑器是操作系统基础的功能软件之一。根据使用环境的不同,Linux的文本编辑器有很......
  • 界面控件DevExpress WPF富文本编辑器,让系统拥有Word功能(二)
    DevExpressWPF控件的富文本编辑器允许开发者将文字处理功能集成到下一个WPF项目中,凭借其全面的文本格式选项、邮件合并以及丰富的终端用户选项集合,可以轻松地提供MicrosoftWord功能。DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。......
  • Linux 将另一服务器上的文件或文件夹复制到当前服务器
    1.文件复制1.1 将本地文件拷贝到远程  scp文件名用户名@计算机IP或者计算机名称:远程路径例如:scp/root/install.*[email protected]:/usr/local/src1.2 从远程将文件拷回本地scp用户名@计算机IP或者计算机名称:文件名本地路径例如:[email protected]......
  • Vim编辑器-1
    Vim基础因为想学操作系统,但是没有图形化界面,决心把Vim学一遍。用此随笔来记录心得以前一直没懂Vim是因为它和传统编辑器不同,需要很多命令,但这些命令是用来干什么的不清楚。下面这段话有如醍醐灌顶vihastwomodes:commandmodeandinsertmode.Assoonasyouenterafi......
  • camunda工作流实战项目(表单设计器+流程编辑器,零代码创建流程)
    一、整体情况介绍基于ruoyi平台和camunda工作流开发而成,结合bpmn.js流程编辑器和vform表单设计器,实现常规流程零代码创建。具备流程中心的能力,支持外部任务,可协调多个业务系统协同工作具备SaaS平台的能力,支持多租户,各业务系统可作为租户,创建自己的流程,通过外部任务与自身业务......
  • vim编辑器模式和命令
    输入命令:yum-yinstallvim*​或者sudoapt-getinstallvim 命令模式按dd键删除当前光标所在行按D键删除当前光标所在行按G键将光标移动到文件的最后按dG键删除当前光标所在行到最后一行按d1G键删除当前光标所在行到第一......
  • 要创建富文本内容?Kendo UI Angular组件有专门的编辑器应对!
    您的Angular应用程序可能需要允许用户添加带有格式化选项的文本、图像、表格、外观样式和/或链接,使用KendoUIforAngular的编辑器,可以轻松搞定这些!KendoUIforAngular是专业级的AngularUI组件库,不仅是将其他供应商提供的现有组件封装起来,telerik致力于提供纯粹高性能的Angul......