为百度文本编辑器UEditor增加图片删除功能[php]

正文开始

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没有压缩到编辑器里,不需要编译或打包。

正文结束

js 正则替换返回值做回调函数 js做webrtc直播的心得总结