关于fckeditor粘贴图片自动上传

图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的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);

};

效果展示:

详细内容可参考这篇文章:http://blog.ncmem.com/wordpress/2019/08/07/ueditor-word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0/

讨论群:223813913

彻底解决fckeditor(jsp版)上传中文图片乱码问题,我这里用的编码是utf-8的,这里用的fckeditor 是2.6的,fckeditor.java包是2.3的,经过我修改ConnectorServlet.java和SimpleUploaderServlet.java两个文件,重新生成fckeditor-java-2.3.jar包, 要解决所有的乱码问题,有3部要修改, 1.修改Web容器的字符编码,如果Web容器用的是Tomcat,则修改conf/server.xml文件,在两个Connector中添加“URIEncoding="utf-8"”,我这里用的是utf-8编码,所以修改成utf-8,若项目是gb2312编码,则设置为“URIEncoding="gb2312"”。 2.在“浏览服务器”页面中上传文件时,打开项目WebRoot中的文件/editor/filemanager/browser/default/frmupload.html,在head中加一个meta: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />,看看该文件是不是utf-8格式的,若不是,则换成utf-8,若你用的不是utf-8则成你用的那种编码,上面charset也设置成你用的编码 3.修改ConnectorServlet.java和SimpleUploaderServlet.java两个文件,我在这两个文件中都是加了一个静态变量encoding,private static String encoding;保存项目中的编码, 若在web.xml文件中没有给这个变量传值的话,默认是gb2312,如下代码if(encoding.isEmpty()){encoding="gb2312";},在ConnectorServlet.java的doGet与doPost的开头部分加入request.setCharacterEncoding(encoding);将请求的字符集编码设置成项目中的编码,在ConnectorServlet.java和SimpleUploaderServlet.java两个文件中的DiskFileUpload upload = new DiskFileUpload();后面加入upload.setHeaderEncoding(encoding);告诉FileUpload组件处理时的编码为项目编码,在FileItem中,用getString(encoding),这项设置可以解决获取的表单字段为乱码的问题,所以在每个FileItem实例后面都执行一次getString(encoding),就告诉FileItem在取值时用的编码是encoding所设置的编码。如在ConnectorServlet.java和SimpleUploaderServlet.java两个文件中的 FileItem item后面加上一句item.getString(encoding);在FileItem uplFile后面加上一句uplFile.getString(encoding); 接下来就是设置web.xml了,在web.xml中给上面讲到的encoding传值,如下 <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> 一切都OK了,真正的解决了上传中文名图片乱码问题。 在上面的第3步中,要用到Ant产生jar,这时要注意, 把Tomcat安装目录下/server/lib里的catalina-ant.jar复制到项目的/WEB-INF/lib下。打开build.xml,修改property name="catalina.home"成Tomcat的安装目录。修改taskdef name="deploy"、taskdef name="list"、taskdef name="reload"、taskdef name="undeploy"如下: <taskdef name="deploy" classname="org.apache.catalina.ant.DeployTask"> <classpath refid="compile.classpath"></classpath> </taskdef> <taskdef name="list" classname="org.apache.catalina.ant.ListTask"> <classpath refid="compile.classpath"></classpath> </taskdef> <taskdef name="reload" classname="org.apache.catalina.ant.ReloadTask"> <classpath refid="compile.classpath"></classpath> </taskdef> <taskdef name="undeploy" classname="org.apache.catalina.ant.UndeployTask"> <classpath refid="compile.classpath"></classpath> </taskdef> 然后在Eclipse的Outline窗口中运行Ant的dist,就会生成的新的FCKeditor-2.3.jar。 绝对是真实的,共享出来与大家分享,少一个上传其它文件的,如RAR的,有添加过这个功能的朋友也拿出来共享下吧
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值