首页 > 其他分享 >FCKEditor 实现ctrl+v粘贴图片并上传、word粘贴带图片

FCKEditor 实现ctrl+v粘贴图片并上传、word粘贴带图片

时间:2023-04-24 16:15:38浏览次数:42  
标签:控件 FCKEditor text base64 整合 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​

 

标签:控件,FCKEditor,text,base64,整合,var,粘贴,图片
From: https://www.cnblogs.com/songsu/p/17349851.html

相关文章

  • KindEditor 实现ctrl+v粘贴图片并上传、word粘贴带图片
    ​ 这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@     page contentType="text/html;cha......
  • wangEditor 实现ctrl+v粘贴图片并上传、word粘贴带图片
    ​在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper。 通过知乎提供的思路找到粘贴的原理,通过TheViper找到粘贴图片的方法。其原理为一下步骤:监听粘贴事件;【用于插入图片】获取光标位......
  • eWebEditor 实现ctrl+v粘贴图片并上传、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>......
  • 本地Typora文件及图片上传博客云
    本地Typora文件及图片上传博客云1.Typora+cnblog图片自动上传一段废话:使用博客园一定会遇到一个操蛋的问题,就是本地Typora编辑的markdown文本,直接粘贴到博客园发布,图片无法显示。这是因为图片是本地路径,不是网络路径。问题能通过将图片上传到三方图床然后在markdown文件中......
  • 视频封面图片怎么设置?视频封面设置方法分享!​
    视频封面图片怎么设置?视频封面是指视频发布时显示的静态图片,通常被用作视频的缩略图和展示图,而且一个美观、吸引人的视频封面能够引起用户的兴趣,提高视频的点击率和观看量,我们在社交媒体等平台上分享视频时,视频封面也会自动显示,方便用户快速识别和浏览,那么很多小伙伴不知道该用什么......
  • VUE - 加载图片
    VUE-加载图片 方式1:<template><divstyle="width:100%;height:100%"><img:src="addjpg":data-source="addjpg"alt=""/></div></template><script>importaddjpgfro......
  • 钉钉小程序开发 图片上传功能
    dd.chooseImage({//请求图片count:1,//上传图片张数限制success:res=>{console.log("返回的文件信息为:");console.log(res);varfilePaths=res.filePaths;dd.getAuthCode({success:function(res){console.log("fil......
  • vue项目结合,vant 实现中轮播图中,点击图片放大图片
    思路:vant中提供函数ImagePreview给原每一个图片子元素设置点击事件,api中提供initial-swipe索引,拿到原图索引设置change事件,保存大图切换的对应索引给到自己的initial-swipe索引中设置图片预览切换时,根据切换后的索引,设置原图的位置,大图原图同步原图片swipeTo(i)切换到......
  • 图片Base64编码
    https://blog.csdn.net/duola8789/article/details/78844431什么是图片Base64编码图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。这样的意义是:网页上的每一个图片,都要消耗一个http请求下载而来(所以CSS雪碧图技术应运而生),而将图片编码成......
  • Java根据ID获取拼多多商品详情 API接口(商品ID、商品标题、价格、原价、昵称、库存、销
    ​ 根据小编对新零售的核心诉求的理解,拼多多其实并不属于新零售实体。而在我国经济红红火火的这个时代,与消费升级并存的对立方向消费降级现象、小镇的中青年的消费偏好、以及一线的消费者复杂甚至相对矛盾的消费特征,和背后由这些消费特征与诉求来决定的电商大格局。Java它是一......