网页flash文本抓取器(,提取图片上传哪家强..js和简单修改UEditor.json)

　　网页flash文本抓取器(,提取图片上传哪家强..js和简单修改UEditor.json)

　　UEditor 是百度网页前端研发部门开发的所见即所得的富文本网页编辑器。它是轻量级的、可定制的，并且专注于用户体验。它是基于 MIT 协议的开源软件，允许免费使用和修改代码。（抄袭……）

　　UEditor是一款非常好用的富文本网页编辑器，具有全中文API和注释，易学易用。尤其是图片上传查看和涂鸦功能非常喜欢，但是很多情况下我们不需要网页编辑器，只需要上传图片即可。那么问题来了，提取图片上传哪个更好...

　　网上有很多上传图片的控件和插件。但它们都不是完美的。有的只有一张图片上传不包括批量上传，有的没有图片查看功能，有的需要flash支持（ios系统是个悲剧），当然有的不能跨语言。上传也没有状态显示，当然客户体验不是很好，浏览器兼容性问题比较多，网上涂鸦更是少见。UEditor 上传图片几乎解决了以上问题。

　　废话不多说，继续走。

　　一、从官网下载UEditor精选开发版（）【1.4.2.Net版】，1、因为我是.Net。2、老版本更稳定，新版本不支持ie8以下版本。其他语言的发展其实和.Net的发展是一样的，主要是思路上。

　　二、 按照官网()的说明将UEditor部署到VS()，保证UEditor可以正常使用，尤其是图片上传功能。本文主要讲解UEditor图片上传功能的单独提取，所以UEditor的使用和部署请参考官网()。图为我在VS中的目录结构。

　　

　　三、 修改config.json相关配置信息，该配置主要是上传和查看图片相关配置。

　　四、修改ueditor.config.js中的toolbar和serverUrl，我们只显示多张图片、单张图片和涂鸦的显示。

　　// 服务器统一请求接口路径

, serverUrl: URL + "../../Common/controller.ashx"

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义

, toolbars: [[ 'insertimage', 'scrawl', 'simpleupload' ]]

　　五、 我们的主要内容是创建我们自己的通用js文件（custom.js），用于提取上传的图片，简单的修改UEditor的ueditor.all.js文件。

　　1)，我们在页面中添加UEditor，显示Div[editor-img]和上传后需要处理的文件名[temp-img-list]，并初始化Ueditor。

　　 $("body").append(" ");

var ue = UE.getEditor('editor-img');

　　2)，我们可以显示div的display='block'，然后我们就可以在页面上看到完整的UEditor，包括图片上传、多图上传和涂鸦。

　　3)，我们在页面Default.aspx中定义了一个多图上传按钮a标签，然后调用uploadImgs()方法，我们要做的就是点击a标签触发UEditor多图上传按钮，我们可以查看源码到更多图片上传按钮的div类是edui-for-insertimage，如图。然后我们点击a标签，弹出图片上传窗口。

　　function uploadImgs() {

$(".edui-for-insertimage .edui-button-body")[0].click();

}

　　

　　

　　

　　我们可以在线上传图片和查看图片。然后点击确认。. . . . . 当我们点击确认时，我们会发现图片会被加载到 UEditor 中。这不是我们想要的。我们已经完成将图片上传到服务器。现在我们只需要知道我们上传了哪些图片或者查看图片时选择了哪些图片。这个名字就是我们所需要的。

　　4)。当图片加载到编辑器中点击确认后，编辑器的内容就会发生变化。我们可以监控编辑器内容的变化，然后获取编辑器中的内容进行分析处理，得到图片名称。我们查看官方API，找到contentChange事件（编辑器内容改变时触发该事件），然后*敏*感*词*该事件。由于单张图片上传比批量上传和涂鸦更复杂，我们稍后会详细解释。

　　 UE.getEditor('editor-img').addListener('contentChange', function (editor) {

//获取编辑器中的内容（html 代码）

var img = UE.getEditor('editor-img').getPlainTxt();

if (img != "") {

//把编辑器中的内容放到临时div中，然后进行获取文件名称。

$("#temp-img-list").html(img);

var array = new Array();

//循环获取文件名称

$("#temp-img-list img").each(function () {

var src = $(this).attr("src");

var name = src.replace("/upload/image/", "");

array.push(name);

});

//清空编辑器中的内容，以便下一次添加图片。

UE.getEditor('editor-img').execCommand('cleardoc');

//调用callbackImg获取懂图片名称

if (typeof callbackImg === "function") {

eval("callbackImg('" + array + "')");

}

}

});

　　5)，我们自定义的js方法callbackImg可以获取图片名称

　　function callbackImg(imgName) {

var names = imgName.split(",");

for (var i = 0; i < names.length; i++) {

$("#show-img-name").append($("").html($("<a></a>").html(names[i]).attr("href", "/upload/image/" + names[i] + "").attr("target", "_blank")));

}

}

　　6)，这样一个完整的批量图片上传查看功能就完成了。同理，我们可以添加涂鸦的功能。其实这一步涂鸦的作用只是一步。自定义一个js方法insertScrawl()，然后调用insertScrawl完成涂鸦的功能。

　　function insertScrawl() {

$('.edui-for-scrawl .edui-button-body')[0].click();

}

　　

　　

　　至此，我们已经完成了批量图片上传和涂鸦功能。

　　六、 看了代码居然发现批量上传图片和涂鸦都是简单的模拟按钮调用，然后上传图片或者选中图片后点击confirm回调在编辑器中处理内容获取文件名. 但是，单独上传图片会有一定的复杂性。

　　1)。当我们用UEditor上传单张图片时，我们会发现编辑器里会有一张等待的图片。图片上传后，等待的图片会被我们上传的图片替换。

　　

　　正在上传...

　　

　　上传完成后。

　　2)，那么问题又来了。问题一，我们以前在编辑器中*敏*感*词*文字变化，然后在里面获取图片提取名称。这时候，我们得到的是等待的图片，而不是我们实际上传的图片。问题二，此时上传时没有状态显示。如果图片太大或者网速不是很好，用户体验不是很好。

　　要解决这些问题，首先要找出刚刚上传的图片和上传完成的事件，还要判断编辑器中的图片是否是等待图片，反之，就是我们的图片上传。

　　1)，要找到源代码，我们可以在ueditor.all.js中找到上传开始和上传完成事件，分别在24379和24390行。在 ueditor.all.js 中，调用 js 方法 preUploadSingleImg() 和 uploadSingleImgCallback。()。

　　2)，修改ueditor.all.js中的代码（第1、2、3行、第23、24、25行）

　　 　　　　　　if (typeof preUploadSingleImg === "function") {

preUploadSingleImg();

}

function callback() {

try{

var link, json, loader,

body = (iframe.contentDocument || iframe.contentWindow.document).body,

result = body.innerText || body.textContent || '';

json = (new Function("return " + result))();

link = me.options.imageUrlPrefix + json.url;

if(json.state == 'SUCCESS' && json.url) {

loader = me.document.getElementById(loadingId);

loader.setAttribute('src', link);

loader.setAttribute('_src', link);

loader.setAttribute('title', json.title || '');

loader.setAttribute('alt', json.original || '');

loader.removeAttribute('id');

domUtils.removeClasses(loader, 'loadingclass');

} else {

showErrorLoader && showErrorLoader(json.state);

}

//单独提取上传回调函数。

if (typeof uploadSingleImgCallback === 'function') {

uploadSingleImgCallback();

}

　　3)、自定义js中添加方法custom.js

　　//单传图片开始上传,显示等待。

function preUploadSingleImg() {

if ($("#loading").length > 0) {

$("#loading").html("/Scripts/ueditor/loading.gif");;

}

}

//单传图片回调，隐藏等待图片

function uploadSingleImgCallback() {

if ($("#loading").length > 0) {

$("#loading").empty();

}

}

　　4)，最后要做的就是在页面上添加一个空的div

　　5)。这样我们就解决了单张图片上传状态的问题，但是也存在在编辑器中获取上传图片的问题。这时候，我们需要做两步。

　　1），修改custom.js中的代码，编辑器内容变化事件中的contentChange判断是否在等待图片，如果是在等待图片，我们不做任何处理。修改代码为

　　UE.getEditor('editor-img').addListener('contentChange', function (editor) {

//获取编辑器中的内容（html 代码）

var img = UE.getEditor('editor-img').getPlainTxt();

if (img != "") {

//判断是否是单图片上传，如果是单传不做任何处理，等待回调函数再次调用。

if (img.indexOf("loadingclass") == -1) {

//把编辑器中的内容放到临时div中，然后进行获取文件名称。

$("#temp-img-list").html(img);

var array = new Array();

//循环获取文件名称

$("#temp-img-list img").each(function () {

var src = $(this).attr("src");

var name = src.replace("/upload/image/", "");

array.push(name);

});

//清空编辑器中的内容，以便下一次添加图片。

UE.getEditor('editor-img').execCommand('cleardoc');

//调用callbackImg获取懂图片名称

if (typeof callbackImg === "function") {

eval("callbackImg('" + array + "')");

}

}

}

});

　　2)，我们在上传事件中清除编辑器中的内容，然后编辑器会调用contentChange事件，因为上传完成后，编辑器不是等待的图片而是我们实际上传的图片。这时候只要跟着多图上传就可以得到图片名称了。修改uploadSingleImgCallback方法为

　　//单传图片回调,然后清理内容,在清理内容会自动调用contentChange事件，然后再获取上传文件的文件名。

function uploadSingleImgCallback() {

UE.getEditor('editor-img').execCommand('cleardoc');

if ($("#loading").length > 0) {

$("#loading").empty();

}

}

　　6) 最后，我自定义了一个按钮，调用uploadImg()方法，弹出一个选择图片的窗口，然后选中图片，点击确定上传到服务器，获取文件名。

　　function uploadImg() {

$(".edui-for-simpleupload input").click();

}

　　

　　总结：我们选择从UEditor中提取多图单图上传和涂鸦的功能。对于其他语言，逻辑是一样的，只是改变了不同的服务器代码。

　　以下是*敏*感*词*演示

　　

　　谢谢收看...

　　GitHub：