https://article.itxueyuan.com/vOOPG2
与原文写的不同,优化过,事件做了内部触发,防止全局查找对象的问题。
第一步 (添加后台删除地址)
打开 ueditor/net/config.json
找到
"imageManagerActionName": "listimage",
上面新增
"imageDelActionName": "delImage", /* 执行图片管理的action名称 */
注意 备注必须采用 /* */ 的格式 原文的不对 导致action获取不到而报错
第二步 增加js删除方法
修改ueditor/dialogs/image/image.js文件
在 UploadImage.prototype = {};
下面加删除图片的方法
//新增在线管理删除图片
function ueDelImg(path, item){
if(confirm('您确定要删除图片吗?删除后不可恢复!')){
var url = editor.getActionUrl(editor.getOpt('imageDelActionName'));
$.post(url,{
'path': path,
'token': localStorage.getItem('userToken'),
},function(res){
if (res.state == 'SUCCESS') {
$(item).remove();
}else{
alert(res.title);
}
},'json');
}
}
//添加删除按钮到列表上
还是当前的js
查找 icon = document.createElement('span');
下面加
//删除按钮开始
delBtn = document.createElement('a');
delBtn.innerHTML = '删除';
domUtils.addClass(delBtn, 'delBtn');
delBtn.setAttribute('href', 'javascript:;');
delBtn.path = list[i].path;
delBtn.item = item;
delBtn.addEventListener('click', function (e) {
//防止向上触发选中图片的js
e.stopPropagation();
ueDelImg(this.path, this.item);
});
//结束
//注意 后端的图片接口需要输出path 相对路径 方便查找删除
token也建议加上 以做安全校验
item.appendChild(icon);
下面加
item.appendChild(delBtn);
最后 修改样式
编辑 ueditor/dialogs/image/image.css
查找 #online li.selected .icon:hover {}
下面加
/* 新增在线管理删除图片样式*/
#online li .delBtn {
width: auto;
position: absolute;
top: 0;
right: 0;
color:#F00;
background-color:#DDDDDD;
opacity:0.8;
filter:alpha(80);
border: 0;
z-index:3;
text-align:right;
text-decoration:none;
padding: 1px 3px;
}
php删除代码参考
case 'delImage':
$path = input('path', '', 'trim');
$token = input('token', '', 'trim');
if(!$token) {
exit(json_encode(array(
"state" => "fail",
"title" => '未提交token',
"list" => [],
"start" => 0,
"total" => 0
)));
}
$uid = 0;
$tokenUid = explode('.', $token)[0];
if ($tokenUid) {
$tokenInCache = PubUser::optUserToken('getToken', $tokenUid);
$isLocal = ($_SERVER['REMOTE_ADDR'] == '127.0.0.1');
if($tokenInCache && ($isLocal || $tokenInCache === $token)) {
$uid = $tokenUid;
}
}
if(!$uid) {
exit(json_encode(array(
"state" => "fail",
"title" => '您未登录',
"list" => [],
"start" => 0,
"total" => 0
)));
}
$fileInfo = PubArticleFujian::where([
'fileurl' => $path,
])->field('id,cuid')->find();
if(!$fileInfo) {
exit(json_encode(array(
"state" => "fail",
"title" => '文件不存在',
"list" => [],
"start" => 0,
"total" => 0
)));
}
if($fileInfo['cuid'] != $uid) {
exit(json_encode(array(
"state" => "fail",
"title" => '身份已经切换',
"list" => [],
"start" => 0,
"total" => 0
)));
}
PubArticleFujian::where([
'id' => $fileInfo['id'],
])->delete();
AliOss::deleteFile($path);
$result = json_encode(array(
"state" => "SUCCESS",
"title" => "删除成功",
));
print_r($result) ;
break;
完成。
补充说明:这个图片管理的js没有压缩到编辑器里,不需要编译或打包。