关于Ckeditor编辑器（四）

ckeditor编辑器处理复制word文档带图片

只有研发想不到，没有产品需求做不到，竟然还有ckeditor编辑器的坑
直接从word文档里面复制过来的文本，含有大量的图片，客户懒得一张张图片上传……
关于Ckeditor编辑器（四）

word文档里面的图片路径都是这样的，浏览器不能解析
file:///C:/Users/SUPERS~1.Z/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg

解决办法
a.监听编辑器内容的改变当文本被粘贴进来的时候就进行预处理。
b.将文本的img标签过滤，然后将图片上传到服务器。
c.用上传之后的图片地址替换原有的url

  CKEDITOR.on("instanceReady", function(){
    	 CKEDITOR.instances.content.on('change',function(e){//content为textarea的id
    		 var a = e.editor.document ;
             var b = a.find("img");
             var count = b.count();
             for(var i=0;i<count;i++){
            	 var src =b.getItem(i).$.src;//获取img的src
                 if( src.substring(0,4)!='http'){
                	 $.ajax({
                         type:"POST",
                         url : "${ctxPath}/uploadLocal",
                         async:false,//同步，因为修改编辑器内容的时候会多次调用change方法，所以要同步，否则会多次调用后台
                         data: {"path":b.getItem(i).$.src},
                         success:function(data){
                        	 var data=eval('(' + data + ')'); 
             				if(data.statusCode=='200'){
                                 var imgurl=data.filename; //上传服务器之后的地址
                                   //获取并更改到现有的图片标签src的值
                                 b.getItem(i).$.src=imgurl;
                                 var a = CKEDITOR.instances.content.document.$.getElementsByTagName("img")[i];
                                 a.setAttribute('data-cke-saved-src',imgurl);
             				}
                }
                 }); 
                 } else{
                	 //不是本地图片不处理
                	// alert(src);
                 }
            	
             }
    	 });
    	
    })

最终实现效果
关于Ckeditor编辑器（四）

关于Ckeditor编辑器（四）

ckeditor编辑器处理复制word文档带图片

相关推荐