.NET下为百度文本编辑器UEditor增加图片删除功能示
编程学习 2021-07-04 22:40www.dzhlxh.cn编程入门
今天下载了目前最新版1.2.5为版本看更新记录，主要是对表格做个修改，我下载用上，我靠，上传图片的删除功能给取消了，狼蚁网站SEO优化与大家分享下增加图片删除功能示例
百度的这个编辑器，的确挺好，但也有些，让人不如意的，如每次更新，本来有功能给搞没了，旧版本的代码又不能直接拿过来组合用，对用户来很是不爽。今天下载了目前最新版1.2.5为版本看更新记录，主要是对表格做个修改，我下载用上，我靠，上传图片的删除功能给取消了。把旧版本的删除代码拿过来，不好使，还得我慢慢研究，闹心啊，闹心，折磨我半天。
1、首先修改服务器端ueditor\net下的文件imageManager.ashx，增加图片删除的处理。如下代码的Add部分所示：
<%@ WebHandler Language="C#" Class="imageManager" %>
/**
* Created by visual studio2010
* User: xuheng
* Date: 12-3-7
* Time: 下午16:29
* To change this template use File | Settings | File Templates.
*/
using System;
using System.Web;
using System.IO;
using System.Text.RegularExpressions;
public class imageManager : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string[] paths = { "upload", "upload1" }; //需要遍历的目录列表，最好使用缩略图地址，否则当网速慢时可能会造成严重的延时
string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" }; //文件允许格式
string action = context.Server.HtmlEncode(context.Request["action"]);
if (action == "get")
{
String str = String.Empty;
foreach (string path in paths)
{
DirectoryInfo info = new DirectoryInfo(context.Server.MapPath(path));
//目录验证
if (info.Exists)
{
DirectoryInfo[] infoArr = info.GetDirectories();
foreach (DirectoryInfo tmpInfo in infoArr)
{
foreach (FileInfo fi in tmpInfo.GetFiles())
{
if (Array.IndexOf(filetype, fi.Extension) != -1)
{
str += path+"/" + tmpInfo.Name + "/" + fi.Name + "ue_separate_ue";
}
}
}
}
}
context.Response.Write(str);
}
//Add Start========================================================== 2013-05-12
//删除选中的文件
string pathDel = string.Empty; //最好使用缩略图地址，否则当网速慢时可能会造成严重的延时
string fileName = context.Server.HtmlEncode(context.Request["fileName"]);
bool isDeleted = false;
if (action == "del")
{
try
{
String fullPath = String.Empty;
foreach (string path in paths)
{
pathDel = context.Server.MapPath(path);
DirectoryInfo info = new DirectoryInfo(pathDel);
//目录验证
if (info.Exists)
{
//获得C:\...\ueditor\net\upload目录下，以时间命名的目录。如：2013-05-12
DirectoryInfo[] infoArr = info.GetDirectories();
foreach (DirectoryInfo tmpInfo in infoArr)
{
foreach (FileInfo fi in tmpInfo.GetFiles())
{
//判断是否是指定的图片类型，因为长传的附件和图片在同一个目录
if (Array.IndexOf(filetype, fi.Extension) != -1)
{
if (fi.Name.Equals(fileName))
{
fullPath = pathDel + "/" + tmpInfo.Name + "/"+ fileName;
File.Delete(fullPath);
isDeleted = true;
break;
}
}
}
//已经删除，往外跳出
if (isDeleted == true)
break;
}
}
//已经删除，往外跳出
if (isDeleted == true)
break;
}
isDeleted = false;
context.Response.Write("success");
}
catch
{
context.Response.Write("error");
}
}
//Add End============================================================ 2013-05-12
}
public bool IsReusable
{
get
{
return false;
}
}
}
2、修改脚本ueditor\dialogs\image下的image.js文件。增加图片删除的处理的Ajax调用。如下的Add部分所示：
/**
* Created by JetBrains PhpStorm.
* User: taoqili
* Date: 12-01-08
* Time: 下午2:52
* To change this template use File | Settings | File Templates.
*/
var imageUploader = {},
flashObj = null,
postConfig=[];
(function () {
var g = $G,
ajax = parent.baidu.editor.ajax,
maskIframe = g("maskIframe"); //tab遮罩层,用来解决flash和其他dom元素的z-index层级不一致问题
// flashObj; //flash上传对象
var flagImg = null, flashContainer;
imageUploader.init = function (opt, callbacks) {
switchTab("imageTab");
createAlignButton(["remoteFloat", "localFloat"]);
createFlash(opt, callbacks);
var srcImg = editor.selection.getRange().getClosedNode();
if (srcImg) {
showImageInfo(srcImg);
showPreviewImage(srcImg, true);
var tabElements = g("imageTab").children,
tabHeads = tabElements[0].children,
tabBodys = tabElements[1].children;
for (var i = 0, ci; ci = tabHeads[i++];) {
if (ci.getAttribute("tabSrc") == "remote") {
clickHandler(tabHeads, tabBodys, ci);
}
}
}
addUrlChangeListener();
addOKListener();
addScrollListener();
addSearchListener();
$focus(g("url"));
};
imageUploader.setPostParams = function(obj,index){
if(index===undefined){
utils.each(postConfig,function(config){
config.data = obj;
})
}else{
postConfig[index].data = obj;
}
};
function insertImage(imgObjs) {
editor.fireEvent('beforeInsertImage', imgObjs);
editor.execCommand("insertImage", imgObjs);
}
function searchImage() {
var imgSearchInput = $G("imgSearchTxt");
if (!imgSearchInput.getAttribute("hasClick") || !imgSearchInput.value) {
selectTxt(imgSearchInput);
return;
}
g("searchList").innerHTML = "<p class='msg'>" + lang.imageLoading + "</p>";
var key = imgSearchInput.value,
type = $G("imgType").value,
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;
var reqCallBack = function (data) {
try {
var imgObjs = data.data;
} catch (e) {
return;
}
var frg = document.createDocumentFragment();
if (imgObjs.length < 2) {
g("searchList").innerHTML = "<p class='msg'>" + lang.tryAgain + "</p>";
return;
}
for (var i = 0, len = imgObjs.length; i < len - 1; i++) {
var img = document.createElement("img"), obj = imgObjs[i], div = document.createElement("div");
img.src = obj.objURL; //obj.thumbURL 为缩略图，只能针对百度内部使用
img.setAttribute("sourceUrl", obj.objURL);
var title = obj.fromPageTitleEnc.replace(/^\.\.\./i, "");
img.setAttribute("title", lang.toggleSelect + obj.width + "X" + obj.height);
img.onclick = function () {
changeSelected(this);
};
scale(img, 100, obj.width, obj.height);
div.appendChild(img);
var p = document.createElement("p");
p.innerHTML = "<a target='_blank' href='" + obj.fromURL + "'>" + title + "</a>";
div.appendChild(p);
//setTimeout(function(){
frg.appendChild(div);
/
1、首先修改服务器端ueditor\net下的文件imageManager.ashx，增加图片删除的处理。如下代码的Add部分所示：
代码如下:
<%@ WebHandler Language="C#" Class="imageManager" %>
/**
* Created by visual studio2010
* User: xuheng
* Date: 12-3-7
* Time: 下午16:29
* To change this template use File | Settings | File Templates.
*/
using System;
using System.Web;
using System.IO;
using System.Text.RegularExpressions;
public class imageManager : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string[] paths = { "upload", "upload1" }; //需要遍历的目录列表，最好使用缩略图地址，否则当网速慢时可能会造成严重的延时
string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" }; //文件允许格式
string action = context.Server.HtmlEncode(context.Request["action"]);
if (action == "get")
{
String str = String.Empty;
foreach (string path in paths)
{
DirectoryInfo info = new DirectoryInfo(context.Server.MapPath(path));
//目录验证
if (info.Exists)
{
DirectoryInfo[] infoArr = info.GetDirectories();
foreach (DirectoryInfo tmpInfo in infoArr)
{
foreach (FileInfo fi in tmpInfo.GetFiles())
{
if (Array.IndexOf(filetype, fi.Extension) != -1)
{
str += path+"/" + tmpInfo.Name + "/" + fi.Name + "ue_separate_ue";
}
}
}
}
}
context.Response.Write(str);
}
//Add Start========================================================== 2013-05-12
//删除选中的文件
string pathDel = string.Empty; //最好使用缩略图地址，否则当网速慢时可能会造成严重的延时
string fileName = context.Server.HtmlEncode(context.Request["fileName"]);
bool isDeleted = false;
if (action == "del")
{
try
{
String fullPath = String.Empty;
foreach (string path in paths)
{
pathDel = context.Server.MapPath(path);
DirectoryInfo info = new DirectoryInfo(pathDel);
//目录验证
if (info.Exists)
{
//获得C:\...\ueditor\net\upload目录下，以时间命名的目录。如：2013-05-12
DirectoryInfo[] infoArr = info.GetDirectories();
foreach (DirectoryInfo tmpInfo in infoArr)
{
foreach (FileInfo fi in tmpInfo.GetFiles())
{
//判断是否是指定的图片类型，因为长传的附件和图片在同一个目录
if (Array.IndexOf(filetype, fi.Extension) != -1)
{
if (fi.Name.Equals(fileName))
{
fullPath = pathDel + "/" + tmpInfo.Name + "/"+ fileName;
File.Delete(fullPath);
isDeleted = true;
break;
}
}
}
//已经删除，往外跳出
if (isDeleted == true)
break;
}
}
//已经删除，往外跳出
if (isDeleted == true)
break;
}
isDeleted = false;
context.Response.Write("success");
}
catch
{
context.Response.Write("error");
}
}
//Add End============================================================ 2013-05-12
}
public bool IsReusable
{
get
{
return false;
}
}
}
2、修改脚本ueditor\dialogs\image下的image.js文件。增加图片删除的处理的Ajax调用。如下的Add部分所示：
代码如下:
/**
* Created by JetBrains PhpStorm.
* User: taoqili
* Date: 12-01-08
* Time: 下午2:52
* To change this template use File | Settings | File Templates.
*/
var imageUploader = {},
flashObj = null,
postConfig=[];
(function () {
var g = $G,
ajax = parent.baidu.editor.ajax,
maskIframe = g("maskIframe"); //tab遮罩层,用来解决flash和其他dom元素的z-index层级不一致问题
// flashObj; //flash上传对象
var flagImg = null, flashContainer;
imageUploader.init = function (opt, callbacks) {
switchTab("imageTab");
createAlignButton(["remoteFloat", "localFloat"]);
createFlash(opt, callbacks);
var srcImg = editor.selection.getRange().getClosedNode();
if (srcImg) {
showImageInfo(srcImg);
showPreviewImage(srcImg, true);
var tabElements = g("imageTab").children,
tabHeads = tabElements[0].children,
tabBodys = tabElements[1].children;
for (var i = 0, ci; ci = tabHeads[i++];) {
if (ci.getAttribute("tabSrc") == "remote") {
clickHandler(tabHeads, tabBodys, ci);
}
}
}
addUrlChangeListener();
addOKListener();
addScrollListener();
addSearchListener();
$focus(g("url"));
};
imageUploader.setPostParams = function(obj,index){
if(index===undefined){
utils.each(postConfig,function(config){
config.data = obj;
})
}else{
postConfig[index].data = obj;
}
};
function insertImage(imgObjs) {
editor.fireEvent('beforeInsertImage', imgObjs);
editor.execCommand("insertImage", imgObjs);
}
function searchImage() {
var imgSearchInput = $G("imgSearchTxt");
if (!imgSearchInput.getAttribute("hasClick") || !imgSearchInput.value) {
selectTxt(imgSearchInput);
return;
}
g("searchList").innerHTML = "<p class='msg'>" + lang.imageLoading + "</p>";
var key = imgSearchInput.value,
type = $G("imgType").value,
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;
var reqCallBack = function (data) {
try {
var imgObjs = data.data;
} catch (e) {
return;
}
var frg = document.createDocumentFragment();
if (imgObjs.length < 2) {
g("searchList").innerHTML = "<p class='msg'>" + lang.tryAgain + "</p>";
return;
}
for (var i = 0, len = imgObjs.length; i < len - 1; i++) {
var img = document.createElement("img"), obj = imgObjs[i], div = document.createElement("div");
img.src = obj.objURL; //obj.thumbURL 为缩略图，只能针对百度内部使用
img.setAttribute("sourceUrl", obj.objURL);
var title = obj.fromPageTitleEnc.replace(/^\.\.\./i, "");
img.setAttribute("title", lang.toggleSelect + obj.width + "X" + obj.height);
img.onclick = function () {
changeSelected(this);
};
scale(img, 100, obj.width, obj.height);
div.appendChild(img);
var p = document.createElement("p");
p.innerHTML = "<a target='_blank' href='" + obj.fromURL + "'>" + title + "</a>";
div.appendChild(p);
//setTimeout(function(){
frg.appendChild(div);
/