百度文本编辑器UEditor(图片的在线管理中)增加图片删除功能【.net版】

分类：Javascript| 发布：佚名| 查看：6416 | 发表时间：2014/2/17

目前UEditor最新版本是：UEditor 1.3.6^{更新日期：2013.12.24}根据UEditor的帮助第19条，我们知道，

UEditor提供的图片在线管理是指什么？需要注意哪些问题？

1、图片在线管理虽名为管理，但考虑到安全因素，目前版本的UEditor并未提供删除功能，仅仅实现了在线图片浏览并插入至编辑器的功能。
2、由于无法获取数据库相关信息，UEditor的图片浏览采用了遍历文件夹的方式来实现。同学们需要在imageManager.php文件中配置存放图片文件的文件夹路径，并最终返回如imageManager.php中所示的json数据即可。
3、获取服务器图片的请求通过ajax来发送，需要在editor_config.js中配置imageManagerPath参数来指定imageManager.php文件的路径。如果同学们有额外的参数需要向后台发送，比如想实现删除功能，可以修改dialog文件夹下的image.js文件中关于imageManager模块的代码。
4、建议后台配置的图片存放路径尽量指向缩略图存放文件夹，并在返回数据中同时返回缩略图地址和真实地址，否则在浏览时可能造成不必要的带宽和性能消耗！

那么，我们如果自己添加删除图片的功能呢？

步骤如下（.net方式，php，jsp方式与此雷同）：

1、首先修改服务器端ueditor\net下的文件imageManager.ashx，增加图片删除的处理。如下代码的Add部分所示：

001<%@ WebHandler Language="C#" Class="imageManager" %>
002/**
003 * Created by visual studio2010
004 * User: xuheng
005 * Date: 12-3-7
006 * Time: 下午16:29
007 * To change this template use File | Settings | File Templates.
008 */
009using System;
010using System.Web;
011using System.IO;
012using System.Text.RegularExpressions;
013 
014public class imageManager : IHttpHandler
015{
016 
017 public void ProcessRequest(HttpContext context)
018 {
019 context.Response.ContentType = "text/plain";
020  
021  
022 string[] paths = { "upload", "upload1" }; //需要遍历的目录列表，最好使用缩略图地址，否则当网速慢时可能会造成严重的延时
023 string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" }; //文件允许格式
024 
025 string action = context.Server.HtmlEncode(context.Request["action"]);
026 
027 if (action == "get")
028 {
029 String str = String.Empty;
030  
031 foreach (string path in paths)
032 {
033 DirectoryInfo info = new DirectoryInfo(context.Server.MapPath(path));
034 
035 //目录验证
036 if (info.Exists)
037 {
038 DirectoryInfo[] infoArr = info.GetDirectories();
039 foreach (DirectoryInfo tmpInfo in infoArr)
040 {
041 foreach (FileInfo fi in tmpInfo.GetFiles())
042 {
043 if (Array.IndexOf(filetype, fi.Extension) != -1)
044 {
045 str += path+"/" + tmpInfo.Name + "/" + fi.Name + "ue_separate_ue";
046 }
047 }
048 }
049 }
050 }
051  
052 context.Response.Write(str);
053 }
054 
055 //Add Start========================================================== 2013-05-12
056 //删除选中的文件
057 string pathDel = string.Empty; //最好使用缩略图地址，否则当网速慢时可能会造成严重的延时
058 string fileName = context.Server.HtmlEncode(context.Request["fileName"]);
059 bool isDeleted = false;
060 if (action == "del")
061 {
062 try
063 {
064  
065 String fullPath = String.Empty;
066 foreach (string path in paths)
067 {
068 pathDel = context.Server.MapPath(path);
069 DirectoryInfo info = new DirectoryInfo(pathDel);
070 
071 //目录验证
072 if (info.Exists)
073 {
074 //获得C:\...\ueditor\net\upload目录下，以时间命名的目录。如：2013-05-12
075 DirectoryInfo[] infoArr = info.GetDirectories();
076 foreach (DirectoryInfo tmpInfo in infoArr)
077 {
078 foreach (FileInfo fi in tmpInfo.GetFiles())
079 {
080 //判断是否是指定的图片类型，因为长传的附件和图片在同一个目录
081 if (Array.IndexOf(filetype, fi.Extension) != -1)
082 {
083 if (fi.Name.Equals(fileName))
084 {
085 fullPath = pathDel + "/" + tmpInfo.Name + "/"+ fileName;
086 File.Delete(fullPath);
087 isDeleted = true;
088 break;
089 }
090 }
091 }
092 //已经删除，往外跳出
093 if (isDeleted == true)
094 break;
095 }
096 }
097 //已经删除，往外跳出
098 if (isDeleted == true)
099 break;
100 }
101 isDeleted = false;
102 context.Response.Write("success");
103 }
104 catch
105 {
106 context.Response.Write("error");
107 }
108 }
109 //Add End============================================================ 2013-05-12
110 }
111 
112 public bool IsReusable
113 {
114 get
115 {
116 return false;
117 }
118 }
119}

2、修改脚本ueditor\dialogs\image下的image.js文件。增加图片删除的处理的Ajax调用。如下的Add部分所示：

001asf/**
002 * Created by JetBrains PhpStorm.
003 * User: taoqili
004 * Date: 12-01-08
005 * Time: 下午2:52
006 * To change this template use File | Settings | File Templates.
007 */
008var imageUploader = {},
009 flashObj = null,
010 postConfig=[];
011(function () {
012 var g = $G,
013 ajax = parent.baidu.editor.ajax,
014 maskIframe = g("maskIframe"); //tab遮罩层,用来解决flash和其他dom元素的z-index层级不一致问题
015 // flashObj; //flash上传对象
016 
017 var flagImg = null, flashContainer;
018 imageUploader.init = function (opt, callbacks) {
019 switchTab("imageTab");
020 createAlignButton(["remoteFloat", "localFloat"]);
021 createFlash(opt, callbacks);
022 var srcImg = editor.selection.getRange().getClosedNode();
023 if (srcImg) {
024 showImageInfo(srcImg);
025 showPreviewImage(srcImg, true);
026 var tabElements = g("imageTab").children,
027 tabHeads = tabElements[0].children,
028 tabBodys = tabElements[1].children;
029 for (var i = 0, ci; ci = tabHeads[i++];) {
030 if (ci.getAttribute("tabSrc") == "remote") {
031 clickHandler(tabHeads, tabBodys, ci);
032 }
033 }
034 
035 }
036 addUrlChangeListener();
037 addOKListener();
038 addScrollListener();
039 addSearchListener();
040 $focus(g("url"));
041 };
042 imageUploader.setPostParams = function(obj,index){
043 if(index===undefined){
044 utils.each(postConfig,function(config){
045 config.data = obj;
046 })
047 }else{
048 postConfig[index].data = obj;
049 }
050 };
051 
052 function insertImage(imgObjs) {
053 editor.fireEvent('beforeInsertImage', imgObjs);
054 editor.execCommand("insertImage", imgObjs);
055 }
056 
057 function searchImage() {
058 var imgSearchInput = $G("imgSearchTxt");
059 if (!imgSearchInput.getAttribute("hasClick") || !imgSearchInput.value) {
060 selectTxt(imgSearchInput);
061 return;
062 }
063 g("searchList").innerHTML = "<p class='msg'>" + lang.imageLoading + "</p>";
064 var key = imgSearchInput.value,
065 type = $G("imgType").value,
066 url = "http://image.baidu.com/i?ct=201326592&cl=2&lm=-1&st=-1&tn=baiduimagejson&istype=2&rn=32&fm=index&pv=&word=" + encodeToGb2312(key) + type + "&" + +new Date;
067 var reqCallBack = function (data) {
068 try {
069 var imgObjs = data.data;
070 } catch (e) {
071 return;
072 }
073 var frg = document.createDocumentFragment();
074 if (imgObjs.length < 2) {
075 g("searchList").innerHTML = "<p class='msg'>" + lang.tryAgain + "</p>";
076 return;
077 }
078 for (var i = 0, len = imgObjs.length; i < len - 1; i++) {
079 var img = document.createElement("img"), obj = imgObjs[i], div = document.createElement("div");
080 img.src = obj.objURL; //obj.thumbURL 为缩略图，只能针对百度内部使用
081 img.setAttribute("sourceUrl", obj.objURL);
082 var title = obj.fromPageTitleEnc.replace(/^\.\.\./i, "");
083 img.setAttribute("title", lang.toggleSelect + obj.width + "X" + obj.height);
084 img.onclick = function () {
085 changeSelected(this);
086 };
087 scale(img, 100, obj.width, obj.height);
088 div.appendChild(img);
089 var p = document.createElement("p");
090 p.innerHTML = "<a target='_blank' href='" + obj.fromURL + "'>" + title + "</a>";
091 div.appendChild(p);
092 //setTimeout(function(){
093 frg.appendChild(div);
094 //},0);
095 
096 }
097 g("searchList").innerHTML = "";
098 g("searchList").appendChild(frg);
099 };
100 baidu.sio.callByServer(url, reqCallBack, {charset:"GB18030"});
101 }
102 
103 function selectTxt(node) {
104 if (node.select) {
105 node.select();
106 } else {
107 var r = node.createTextRange && node.createTextRange();
108 r.select();
109 }
110 }
111 
112 function addSearchListener() {
113 g("imgSearchTxt").onclick = function () {
114 selectTxt(this);
115 this.setAttribute("hasClick", true);
116 if (this.value == lang.searchInitInfo) {
117 this.value = "";
118 }
119 };
120 g("imgSearchTxt").onkeyup = function () {
121 this.setAttribute("hasClick", true);
122 //只触发一次
123 this.onkeyup = null;
124 };
125 
126 g("imgSearchBtn").onclick = function () {
127 searchImage();
128 };
129 g("imgSearchReset").onclick = function () {
130 var txt = g("imgSearchTxt");
131 txt.value = "";
132 txt.focus();
133 g("searchList").innerHTML = "";
134 };
135 g("imgType").onchange = function () {
136 searchImage();
137 };
138 domUtils.on(g("imgSearchTxt"), "keyup", function (evt) {
139 if (evt.keyCode == 13) {
140 searchImage();
141 }
142 })
143 
144 }
145 
146 /**
147 * 延迟加载
148 */
149 function addScrollListener() {
150 
151 g("imageList").onscroll = function () {
152 var imgs = this.getElementsByTagName("img"),
153 top = Math.ceil(this.scrollTop / 100) - 1;
154 top = top < 0 ? 0 : top;
155 for (var i = top * 5; i < (top + 5) * 5; i++) {
156 var img = imgs[i];
157 if (img && !img.getAttribute("src")) {
158 img.src = img.getAttribute("lazy_src");
159 img.removeAttribute("lazy_src");
160 }
161 }
162 }
163 }
164 
165 /**
166 * 绑定确认按钮
167 */
168 function addOKListener() {
169 dialog.onok = function () {
170 var currentTab = findFocus("tabHeads", "tabSrc");
171 switch (currentTab) {
172 case "remote":
173 return insertSingle();
174 break;
175 case "local":
176 return insertBatch();
177 break;
178 case "imgManager":
179 return insertSearch("imageList");
180 break;
181 case "imgSearch":
182 return insertSearch("searchList", true);
183 break;
184 }
185 };
186 dialog.oncancel = function () {
187 hideFlash();
188 }
189 }
190 
191 function hideFlash() {
192 flashObj = null;
193 flashContainer.innerHTML = "";
194 }
195 
196 /**
197 * 将元素id下的所有图片文件插入到编辑器中。
198 * @param id
199 * @param catchRemote 是否需要替换远程图片
200 */
201 function insertSearch(id, catchRemote) {
202 var imgs = $G(id).getElementsByTagName("img"), imgObjs = [];
203 for (var i = 0, ci; ci = imgs[i++];) {
204 if (ci.getAttribute("selected")) {
205 var url = ci.getAttribute("src", 2).replace(/(\s*$)/g, ""), img = {};
206 img.src = url;
207 img.data_ue_src = url;
208 imgObjs.push(img);
209 }
210 }
211 insertImage(imgObjs);
212 catchRemote && editor.fireEvent("catchRemoteImage");
213 hideFlash();
214 }
215 
216 /**
217 * 插入单张图片
218 */
219 function insertSingle() {
220 var url = g("url"),
221 width = g("width"),
222 height = g("height"),
223 border = g("border"),
224 vhSpace = g("vhSpace"),
225 title = g("title"),
226 align = findFocus("remoteFloat", "name"),
227 imgObj = {};
228 if (!url.value) return;
229 if (!flagImg) return; //粘贴地址后如果没有生成对应的预览图，可以认为本次粘贴地址失败
230 if (!checkNum([width, height, border, vhSpace])) return false;
231 imgObj.src = url.value;
232 imgObj.data_ue_src = url.value;
233 imgObj.width = width.value;
234 imgObj.height = height.value;
235 imgObj.border = border.value;
236 imgObj.floatStyle = align;
237 imgObj.vspace = imgObj.hspace = vhSpace.value;
238 imgObj.title = title.value;
239 imgObj.style = "width:" + width.value + "px;height:" + height.value + "px;";
240 insertImage(imgObj);
241 editor.fireEvent("catchRemoteImage");
242 hideFlash();
243 }
244 
245 /**
246 * 检测传入的所有input框中输入的长宽是否是正数
247 * @param nodes input框集合，
248 */
249 function checkNum(nodes) {
250 for (var i = 0, ci; ci = nodes[i++];) {
251 if (!isNumber(ci.value) || ci.value < 0) {
252 alert(lang.numError);
253 ci.value = "";
254 ci.focus();
255 return false;
256 }
257 }
258 return true;
259 }
260 
261 /**
262 * 数字判断
263 * @param value
264 */
265 function isNumber(value) {
266 return /(0|^[1-9]\d*$)/.test(value);
267 }
268 
269 /**
270 * 插入多张图片
271 */
272 function insertBatch() {
273 if (imageUrls.length < 1) return;
274 var imgObjs = [],
275 align = findFocus("localFloat", "name");
276 
277 for (var i = 0, ci; ci = imageUrls[i++];) {
278 var tmpObj = {};
279 tmpObj.title = ci.title;
280 tmpObj.floatStyle = align;
281 //修正显示时候的地址数据,如果后台返回的是图片的绝对地址，那么此处无需修正
282 tmpObj.data_ue_src = tmpObj.src = editor.options.imagePath + ci.url;
283 imgObjs.push(tmpObj);
284 }
285 insertImage(imgObjs);
286 hideFlash();
287 }
288 
289 /**
290 * 找到id下具有focus类的节点并返回该节点下的某个属性
291 * @param id
292 * @param returnProperty
293 */
294 function findFocus(id, returnProperty) {
295 var tabs = g(id).children,
296 property;
297 for (var i = 0, ci; ci = tabs[i++];) {
298 if (ci.className == "focus") {
299 property = ci.getAttribute(returnProperty);
300 break;
301 }
302 }
303 return property;
304 }
305 
306 /**
307 * 绑定地址框改变事件
308 */
309 function addUrlChangeListener() {
310 var value = g("url").value;
311 if (browser.ie) {
312 g("url").onpropertychange = function () {
313 var v = this.value;
314 if (v != value) {
315 createPreviewImage(v);
316 value = v;
317 }
318 };
319 } else {
320 g("url").addEventListener("input", function () {
321 var v = this.value;
322 if (v != value) {
323 createPreviewImage(v);
324 value = v;
325 }
326 }, false);
327 }
328 }
329 
330 /**
331 * 绑定图片等比缩放事件
332 * @param percent 缩放比例
333 */
334 function addSizeChangeListener(percent) {
335 var width = g("width"),
336 height = g("height"),
337 lock = g('lock');
338 width.onkeyup = function () {
339 if (!isNaN(this.value) && lock.checked) {
340 height.value = Math.round(this.value / percent) || this.value;
341 }
342 };
343 height.onkeyup = function () {
344 if (!isNaN(this.value) && lock.checked) {
345 width.value = Math.round(this.value * percent) || this.value;
346 }
347 }
348 }
349 
350 /**
351 * 依据url中的地址创建一个预览图片并将对应的信息填入信息框和预览框
352 */
353 function createPreviewImage(url) {
354 if (!url) {
355 flagImg = null;
356 g("preview").innerHTML = "";
357 g("width").value = "";
358 g("height").value = "";
359 g("border").value = "";
360 g("vhSpace").value = "";
361 g("title").value = "";
362 $focus(g("url"));
363 return;
364 }
365 var img = document.createElement("img"),
366 preview = g("preview");
367 
368 var imgTypeReg = /\.(png|gif|jpg|jpeg)$/gi, //格式过滤
369 urlFilter = ""; //地址过滤
370 if (!imgTypeReg.test(url) || url.indexOf(urlFilter) == -1) {
371 preview.innerHTML = "<span style='color: red'>" + lang.imageUrlError + "</span>";
372 flagImg = null;
373 return;
374 }
375 preview.innerHTML = lang.imageLoading;
376 img.onload = function () {
377 flagImg = this;
378 showImageInfo(this);
379 showPreviewImage(this,true);
380 this.onload = null;
381 };
382 img.onerror = function () {
383 preview.innerHTML = "<span style='color: red'>" + lang.imageLoadError + "</span>";
384 flagImg = null;
385 this.onerror = null;
386 };
387 img.src = url;
388 }
389 
390 /**
391 * 显示图片对象的信息
392 * @param img
393 */
394 function showImageInfo(img) {
395 if (!img.getAttribute("src") || !img.src) return;
396 var wordImgFlag = img.getAttribute("word_img");
397 g("url").value = wordImgFlag ? wordImgFlag.replace("&", "&") : (img.getAttribute('data_ue_src') || img.getAttribute("src", 2).replace("&", "&"));
398 g("width").value = img.width || 0;
399 g("height").value = img.height || 0;
400 g("border").value = img.getAttribute("border") || 0;
401 g("vhSpace").value = img.getAttribute("vspace") || 0;
402 g("title").value = img.title || "";
403 var align = editor.queryCommandValue("imageFloat") || "none";
404 updateAlignButton(align);
405 
406 //保存原始比例，用于等比缩放
407 var percent = (img.width / img.height).toFixed(2);
408 addSizeChangeListener(percent);
409 }
410 
411 /**
412 * 将img显示在预览框，
413 * @param img
414 * @param needClone 是否需要克隆后显示
415 */
416 function showPreviewImage(img, needClone) {
417 var tmpWidth = img.width, tmpHeight = img.height;
418 var maxWidth = 262,maxHeight = 262,
419 target = scaling(tmpWidth,tmpHeight,maxWidth,maxHeight);
420 target.border = img.border||0;
421 target.src = img.src;
422 flagImg = true;
423 if ((target.width + 2 * target.border) > maxWidth) {
424 target.width = maxWidth - 2 * target.border;
425 }
426 if ((target.height + 2 * target.border) > maxWidth) {
427 target.height = maxWidth - 2 * target.border;
428 }
429 var preview = g("preview");
430 preview.innerHTML = '<img src="' + target.src + '" width="' + target.width + '" height="' + target.height + '" border="' + target.border + 'px solid #000" />';
431 }
432 
433 /**
434 * 图片缩放
435 * @param img
436 * @param max
437 */
438 function scale(img, max, oWidth, oHeight) {
439 var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
440 if (ow > max || oh > max) {
441 if (ow >= oh) {
442 if (width = ow - max) {
443 percent = (width / ow).toFixed(2);
444 img.height = oh - oh * percent;
445 img.width = max;
446 }
447 } else {
448 if (height = oh - max) {
449 percent = (height / oh).toFixed(2);
450 img.width = ow - ow * percent;
451 img.height = max;
452 }
453 }
454 }
455 }
456 
457 function scaling(width,height,maxWidth,maxHeight){
458 if(width<maxWidth && height<maxHeight) return {width:width,height:height};
459 var srcRatio = (width/height).toFixed(2),
460 tarRatio = (maxWidth/maxHeight).toFixed(2),
461 w,h;
462 if(srcRatio<tarRatio){
463 h = maxHeight;
464 w = h*srcRatio;
465 }else{
466 w = maxWidth;
467 h = w/srcRatio;
468 }
469 return {width:w.toFixed(0),height:h.toFixed(0)}
470 }
471 /**
472 * 创建flash实例
473 * @param opt
474 * @param callbacks
475 */
476 function createFlash(opt, callbacks) {
477 var i18n = utils.extend({}, lang.flashI18n);
478 //处理图片资源地址的编码，补全等问题
479 for (var i in i18n) {
480 if (!(i in {"lang":1, "uploadingTF":1, "imageTF":1, "textEncoding":1}) && i18n[i]) {
481 i18n[i] = encodeURIComponent(editor.options.langPath + editor.options.lang + "/images/" + i18n[i]);
482 }
483 }
484 opt = utils.extend(opt, i18n, false);
485 var option = {
486 createOptions:{
487 id:'flash',
488 url:opt.flashUrl,
489 width:opt.width,
490 height:opt.height,
491 errorMessage:lang.flashError,
492 wmode:browser.safari ? 'transparent' : 'window',
493 ver:'10.0.0',
494 vars:opt,
495 container:opt.container
496 }
497 };
498 flashContainer = $G(opt.container);
499 option = utils.extend(option, callbacks, false);
500 flashObj = new baidu.flash.imageUploader(option);
501 }
502 
503 /**
504 * 依据传入的align值更新按钮信息
505 * @param align
506 */
507 function updateAlignButton(align) {
508 var aligns = g("remoteFloat").children;
509 for (var i = 0, ci; ci = aligns[i++];) {
510 if (ci.getAttribute("name") == align) {
511 if (ci.className != "focus") {
512 ci.className = "focus";
513 }
514 } else {
515 if (ci.className == "focus") {
516 ci.className = "";
517 }
518 }
519 }
520 }
521 
522 /**
523 * 创建图片浮动选择按钮
524 * @param ids
525 */
526 function createAlignButton(ids) {
527 for (var i = 0, ci; ci = ids[i++];) {
528 var floatContainer = g(ci),
529 nameMaps = {"none":lang.floatDefault, "left":lang.floatLeft, "right":lang.floatRight, "center":lang.floatCenter};
530 for (var j in nameMaps) {
531 var div = document.createElement("div");
532 div.setAttribute("name", j);
533 if (j == "none") div.className = "focus";
534 
535 div.style.cssText = "background:url(images/" + j + "_focus.jpg);";
536 div.setAttribute("title", nameMaps[j]);
537 floatContainer.appendChild(div);
538 }
539 switchSelect(ci);
540 }
541 }
542 
543 function toggleFlash(show) {
544 if (flashContainer && browser.webkit) {
545 flashContainer.style.left = show ? "0" : "-10000px";
546 }
547 }
548 
549 /**
550 * tab点击处理事件
551 * @param tabHeads
552 * @param tabBodys
553 * @param obj
554 */
555 function clickHandler(tabHeads, tabBodys, obj) {
556 //head样式更改
557 for (var k = 0, len = tabHeads.length; k < len; k++) {
558 tabHeads[k].className = "";
559 }
560 obj.className = "focus";
561 //body显隐
562 var tabSrc = obj.getAttribute("tabSrc");
563 for (var j = 0, length = tabBodys.length; j < length; j++) {
564 var body = tabBodys[j],
565 id = body.getAttribute("id");
566 body.onclick = function () {
567 this.style.zoom = 1;
568 };
569 if (id != tabSrc) {
570 body.style.zIndex = 1;
571 } else {
572 body.style.zIndex = 200;
573 //当切换到本地图片上传时，隐藏遮罩用的iframe
574 if (id == "local") {
575 toggleFlash(true);
576 maskIframe.style.display = "none";
577 //处理确定按钮的状态
578 if (selectedImageCount) {
579 dialog.buttons[0].setDisabled(true);
580 }
581 } else {
582 toggleFlash(false);
583 maskIframe.style.display = "";
584 dialog.buttons[0].setDisabled(false);
585 }
586 var list = g("imageList");
587 list.style.display = "none";
588 //切换到图片管理时，ajax请求后台图片列表
589 if (id == "imgManager") {
590 list.style.display = "";
591 //已经初始化过时不再重复提交请求
592 if (!list.children.length) {
593 ajax.request(editor.options.imageManagerUrl, {
594 timeout:100000,
595 action:"get",
596 onsuccess:function (xhr) {
597 //去除空格
598 var tmp = utils.trim(xhr.responseText),
599 imageUrls = !tmp ? [] : tmp.split("ue_separate_ue"),
600 length = imageUrls.length;
601 g("imageList").innerHTML = !length ? "&nbsp;&nbsp;" + lang.noUploadImage : "";
602 for (var k = 0, ci; ci = imageUrls[k++];) {
603 var img = document.createElement("img");
604 
605 var div = document.createElement("div");
606 div.appendChild(img);
607 div.style.display = "none";
608 g("imageList").appendChild(div);
609 img.onclick = function () {
610 changeSelected(this);
611 };
612 //Add Start=============================== 2013-05-12
613 img.ondblclick = function(){
614 var me = this,src = me.getAttribute("src",2);
615 if(!confirm("删除操作不可恢复，您确认要删除本图片么？")) return;
616 ajax.request(editor.options.imageManagerUrl,{
617 action:"del",
618 fileName:src.substr(src.lastIndexOf("/")+1),
619 onsuccess:function(xhr){
620 if(xhr.responseText=="success") {
621 me.parentNode.removeChild(me);
622 }else{
623 alert("服务器删除图片失败，请重试！");
624 }
625 },
626 onerror:function(xhr){
627 }
628 });
629 };
630 //Add End================================ 2013-05-12
631  
632 img.onload = function () {
633 this.parentNode.style.display = "";
634 var w = this.width, h = this.height;
635 scale(this, 100, 120, 80);
636 this.title = lang.toggleSelect + w + "X" + h;
637 this.onload = null;
638 };
639 img.setAttribute(k < 35 ? "src" : "lazy_src", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig, ""));
640 img.setAttribute("data_ue_src", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig, ""));
641 
642 }
643 },
644 onerror:function () {
645 g("imageList").innerHTML = lang.imageLoadError;
646 }
647 });
648 }
649 }
650 if (id == "imgSearch") {
651 selectTxt(g("imgSearchTxt"));
652 }
653 if (id == "remote") {
654 $focus(g("url"));
655 }
656 }
657 }
658 
659 }
660 
661 /**
662 * TAB切换
663 * @param tabParentId tab的父节点ID或者对象本身
664 */
665 function switchTab(tabParentId) {
666 var tabElements = g(tabParentId).children,
667 tabHeads = tabElements[0].children,
668 tabBodys = tabElements[1].children;
669 
670 for (var i = 0, length = tabHeads.length; i < length; i++) {
671 var head = tabHeads[i];
672 if (head.className === "focus")clickHandler(tabHeads, tabBodys, head);
673 head.onclick = function () {
674 clickHandler(tabHeads, tabBodys, this);
675 }
676 }
677 }
678 
679 /**
680 * 改变o的选中状态
681 * @param o
682 */
683 function changeSelected(o) {
684 if (o.getAttribute("selected")) {
685 o.removeAttribute("selected");
686 o.style.cssText = "filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;border: 2px solid #fff";
687 } else {
688 o.setAttribute("selected", "true");
689 o.style.cssText = "filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;border:2px solid blue;";
690 }
691 }
692 
693 /**
694 * 选择切换，传入一个container的ID
695 * @param selectParentId
696 */
697 function switchSelect(selectParentId) {
698 var select = g(selectParentId),
699 children = select.children;
700 domUtils.on(select, "click", function (evt) {
701 var tar = evt.srcElement || evt.target;
702 for (var j = 0, cj; cj = children[j++];) {
703 cj.className = "";
704 cj.removeAttribute && cj.removeAttribute("class");
705 }
706 tar.className = "focus";
707 
708 });
709 }
710 
711 /**
712 * gb2312编码
713 * @param str
714 */
715 function encodeToGb2312(str) {
716 var strOut = "";
717 for (var i = 0; i < str.length; i++) {
718 var c = str.charAt(i),
719 code = str.charCodeAt(i);
720 if (c == " ") strOut += "+";
721 else if (code >= 19968 && code <= 40869) {
722 var index = code - 19968;
723 strOut += "%" + z.substr(index * 4, 2) + "%" + z.substr(index * 4 + 2, 2);
724 } else {
725 strOut += "%" + str.charCodeAt(i).toString(16);
726 }
727 }
728 return strOut;
729 }
730 
731 var z = '...';  // 此处省略了长串值...
732})();

可以看到，我们添加了图片的双击事件：img.ondblclick，然后指定后台操作action:"del"

来源：via

365据说看到好文章不转的人，服务器容易宕机！

标签：UEditor 插件图片

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/javascript/961.html

百度文本编辑器UEditor(图片的在线管理中)增加图片删除功能【.net版】

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想爱你所爱

百度文本编辑器UEditor(图片的在线管理中)增加图片删除功能【.net版】

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想 爱你所爱

想你所想爱你所爱