php版给UEditor的图片在线管理栏目增加图片删除功能
1.找到uedior/dialogs/image/image.js文件,Add为修改部分的代码:
/**
* tab点击处理事件
* @param tabHeads
* @param tabBodys
* @param obj
*/
function clickHandler(tabHeads, tabBodys, obj) {
//head样式更改
for (var k = 0,
len = tabHeads.length; k < len; k++) {
tabHeads[k].className = "";
}
obj.className = "focus";
//body显隐
var tabSrc = obj.getAttribute("tabSrc");
for (var j = 0,
length = tabBodys.length; j < length; j++) {
var body = tabBodys[j],
id = body.getAttribute("id");
body.onclick = function() {
this.style.zoom = 1;
};
if (id != tabSrc) {
body.style.zIndex = 1;
} else {
body.style.zIndex = 200;
//当切换到本地图片上传时,隐藏遮罩用的iframe
if (id == "local") {
toggleFlash(true);
maskIframe.style.display = "none";
//处理确定按钮的状态
if (selectedImageCount) {
dialog.buttons[0].setDisabled(true);
}
} else {
toggleFlash(false);
maskIframe.style.display = "";
dialog.buttons[0].setDisabled(false);
}
var list = g("imageList");
list.style.display = "none";
//切换到图片管理时,ajax请求后台图片列表
if (id == "imgManager") {
list.style.display = "";
//已经初始化过时不再重复提交请求
if (!list.children.length) {
ajax.request(editor.options.imageManagerUrl, {
timeout: 100000,
action: "get",
onsuccess: function(xhr) {
//去除空格
var tmp = utils.trim(xhr.responseText),
imageUrls = !tmp ? [] : tmp.split("ue_separate_ue"),
length = imageUrls.length;
g("imageList").innerHTML = !length ? " " + lang.noUploadImage: "";
for (var k = 0,ci; ci = imageUrls[k++];) {
//Add Start===============================
var div = document.createElement("div");
var img = document.createElement("img");
var del = document.createElement("img");
var p = document.createElement("p"); div.appendChild(img);
div.appendChild(p);
p.appendChild(del);
div.style.display = "none"; img.style.height = "100px";
img.style.width = "100px";
del.setAttribute("src", "images/del.png");
p.style.marginTop = "-104px";
p.style.marginLeft = "90px"; g("imageList").appendChild(div);
img.onclick = function() {
changeSelected(this);
}; del.onclick = function() {
var me = this,
src = me.getAttribute("alt", 2);
var pic = me.parentNode.parentNode.childNodes[0];
if (!confirm("删除操作不可恢复,您确认要删除本图片么?")) return;
ajax.request(editor.options.imageManagerUrl, {
action: "del",
fileName: src.substr(src.lastIndexOf("/") + 1),
onsuccess: function(xhr) {
me.parentNode.parentNode.removeChild(pic);
me.parentNode.removeChild(me);
},
onerror: function(xhr) {
alert("服务器删除图片失败,请重试!");
}
});
};
//Add End================================
img.onload = function() {
this.parentNode.style.display = "";
var w = this.width,
h = this.height;
scale(this, 100, 120, 80);
this.title = lang.toggleSelect + w + "X" + h;
this.onload = null;
};
img.setAttribute(k < 35 ? "src": "lazy_src", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig, ""));
img.setAttribute("title", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig, ""));
img.setAttribute("width", "100px");
img.setAttribute("height", "100px"); del.onload = function() { //设置加载del图片时的样式
this.style = "border:0";
this.onload = null;
};
del.setAttribute("alt", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig, ""));
}
},
onerror: function() {
g("imageList").innerHTML = lang.imageLoadError;
}
});
}
}
if (id == "imgSearch") {
selectTxt(g("imgSearchTxt"));
}
if (id == "remote") {
$focus(g("url"));
}
}
}
}
找到uedior/php/imageManager.php文件,增加以下内容:
if ($action == "del") {
$fileName = $_POST['fileName'];
foreach($paths as $path) {
$str1 = delfiles($fileName, $path);
break;
}
}
function delfiles($fileName, $path, &$files = array()) {
if (!is_dir($path)) return null;
$handle = opendir($path);
while (false !== ($file = readdir($handle))) {
if ($file != '.' && $file != '..') {
$path2 = $path.'/'.$file;
if (is_dir($path2)) {
delfiles($fileName, $path2, $files);
} else {
if (preg_match("/\.(gif|jpeg|jpg|png|bmp)$/i", $file)) {
$path3 = str_replace('../../', '/static/', $path2);
$fileImg = basename($path3);
if ($fileImg == $fileName) {
$is_del = unlink($path2);
}
}
}
}
}
}
php版给UEditor的图片在线管理栏目增加图片删除功能的更多相关文章
- jsp版ueditor图片在线管理返回绝对路径
引用:http://zhengyunfei.iteye.com/blog/2149979 如果你有富文本编辑器的功能需要开发,我推荐你用百度的ueditor.本文将与你分享jsp版ueditor开发中 ...
- 解决ueditor编辑器图片在线管理图片无法显示
使用ueditor,点击在线管理,服务器图片路径显示不正确,如下图所示 查看源码,如下: 发现图片src中中间多了一长串的项目跟路径,解决的办法是 把 jsp/controller.jsp 里面 ...
- Ueditor结合七牛云存储上传图片、附件和图片在线管理的实现和最新更新
最新下载地址: https://github.com/widuu/qiniu_ueditor_1.4.3 Ueditor七牛云存储版本 注意事项 老版本请查看 : https://github.com ...
- UEditor1.4.3.3实现图片上传、删除功能
1.下载ueditor1.4.3.3 UTF-8的版本 2.新建一个项目,在项目中添加UEditor,把下载好的插件都放在ueditor这个文件夹中,在进行一些基本的配置 3.在根目录下新建一个为in ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- ueditor1.4.3jsp版成功上传图片后却回显不出来与在线管理显示不出图片的解决方案
这是因为路径问题,可以在jsp/config.json这个文件去改路径 通过“imageUrlPrefix”与“imagePathFormat”这两个属性去拼凑路径. “imageUrlPrefix” ...
- dedecmsV5.7 百度编辑器ueditor 多图上传 在线管理 排序问题
问题:dedecms后台百度编辑器ueditor的多图上传-在线管理的图片排序有问题,想把这个顺序调成按照文件修改时间倒序来展示 解决方法: 1.打开/include/ueditor/php/acit ...
- 使用uEdit时,在线管理图片功能不可用
把所有的配置文件都配置好了,uedit的在线管理功能图片还是不可用,看了一下源码: 是的,它在img的src属性后边的图片上加上了参数,那肯定不能用啊,所以修改源文件image.js.直接搜索noCa ...
- .NET下为百度文本编辑器UEditor增加图片删除功能
[摘要:比来写了个项目,用到了UEditor,但是UE并出有文件删除功效 然后网上找若何增加 找半天只能找到一个1.2.X的 以是便摹仿PHP的 改成了.NET的 PHP本文 第一步 (增加背景删除地 ...
随机推荐
- binlog之二:怎么样安全删除mysql下的binlog日志
删除binlog方法 第一种方法: mysql> show binary logs; 查看mysql bin-log日志,除了这个以外的,其它都可以使用删除.mysql> purge bi ...
- 在浏览器中输入url并回车后发生了什么?
1 解析url url主要由以下几个部分组成: 1 传输协议 2 服务器 3 域名 4 端口 5 虚拟目录 6 文件名 7 锚 8 参数 2 DNS(域名)解析 找到域名对应的ip 3 浏览器与网站建 ...
- 使用py 和flask 实现的服务器系统目录浏览,日志文件实时显示到网页的功能
看日志希望带有彩色,希望从浏览器上看到,不用连到机器上看. 浏览系统的文件夹,scan + 系统文件夹的层级名字当做url路由,可以深层次看到机器上任何层级的文件夹,实现系统文件夹浏览下载. 如果是点 ...
- Windows 2008 远程登陆时提示"要登录到此远程计算机,您必须被授予允许通过终端登录登录的权限"
ECS Win2008 远程时提示"要登录到此远程计算机,您必须被授予允许通过终端登录登录的权限"的解决方法 问题描述 ECS Windows 2008 远程登陆时提示&quo ...
- GIF助手激活教程(购买+激活)图文版
GIF助手首页==>设置(右上角) ==>输入激活码会弹出购买或者激活的对话框.(如果不明白操作,可以点击如何购买激活码先查看购买帮助指南再进行购买) 点击复制设备码并购买. 此时会进入到 ...
- JasperReports项目中的应用
转自:http://www.blogjava.net/vjame/archive/2013/10/12/404908.html . 2.业务处理 //返回报表查询结果 List<ReportEl ...
- 在vue项目中使用md5加密
MD5:信息-摘要算法,是让大容量信息在用数字签名软件签署私人密匙前被"压缩"成一种保密的格式 一般我们把登录和注册信息的密码进行加密 1.安装模块 cnpm install js ...
- Material使用10 MdRadioModule、MdDatepickerModule、MdNativeDateModule、MdSelectModule
1 MdRadioModule 相当于<input type="radio"> 2 使用步骤 2.1 在共享模块导入MdRadioModule import { NgM ...
- 做c语言的码农专业发展方向
写了几年C语言代码,最近在思索,何去何从比较好? 搜索了一下,发现几个答案: 2015年10月编程语言排行榜 丢开C语言在教学应用外.在目前C语言的实际应用中.常见的应用的情景有如下: 内核/驱动,b ...
- 8.bwapp亲测xxe漏洞
这几天在学习XXE漏洞,这里用靶机bwapp来练习一下这个漏洞,重在学习 xxe漏洞主要针对webservice危险的引用的外部实体并且未对外部实体进行敏感字符的过滤, 从而可以造成命令执行,目录遍历 ...