UEditor 编辑器，图片和附件的【在线管理】添加删除功能

最新推荐文章于 2023-12-03 17:45:43 发布
最新推荐文章于 2023-12-03 17:45:43 发布
阅读量1k 收藏 2
点赞数
分类专栏： Ueditor 文章标签： javascript html css jquery 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hotswwkyo/article/details/115375293
版权

Ueditor 没有图片和附件的删除功能，这会导致没有用到的图片和附件占满服务器硬盘空间。我们可以通过修改源码来添加该功能

  • 添加删除图片功能

  1. 添加删除按钮和事件处理
    要修改的js文件是：ueditor\dialogs\image\image.js，其中的函数pushData就是用来添加图片到列表页面的，并且传入的参数附带有每张图片在服务器对应的存放路径。由此，我们修改该函数，在添加图片的时候给图片附加删除按钮及其事件处理。同时给删除按钮设置一个data-url的属性，属性值为图片在服务器存储的完整路径，代码如下：

    /* 添加图片到列表界面上 */
pushData: function (list) {
    var i, item, img, icon, _this = this,
        urlPrefix = editor.getOpt('imageManagerUrlPrefix');
    // 删除图片处理函数 add at 2021-03-22 by siwenwei -------------start
    var remove_w_file = function () {
        var el_del = $(this);
        try {
            window.event.cancelBubble = true; //停止冒泡
            window.event.returnValue = false; //阻止事件的默认行为
            window.event.preventDefault(); //取消事件的默认行为
            window.event.stopPropagation(); //阻止事件的传播
        } finally {
            if (!confirm("确定要删除吗？")) return;
            $.post(editor.getActionUrl(editor.getOpt('imageRemoveActionName')), utils.extend({
                "path": el_del.attr("data-url")
            }, editor.queryCommandValue('serverparam')), function (r) {
                if (r.state) {
                    el_del.parent().remove();
                } else {
                    alert(r.msg);
                }
            }, "json");
        }
    }
    // 删除图片处理函数 add at 2021-03-22 by siwenwei -------------end
    
    for (i = 0; i < list.length; i++) {
        if (list[i] && list[i].url) {
            item = document.createElement('li');
            img = document.createElement('img');
            icon = document.createElement('span');

            // 创建删除按钮 add at 2021-03-22 by siwenwei
            del_icon = document.createElement('span'); 
            del_icon.innerHTML = 'x';
            del_icon.setAttribute('data-url', list[i].url)
            $(del_icon).click(remove_w_file);

            domUtils.on(img, 'load', (function (image) {
                return function () {
                    _this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight);
                }
            })(img));
            img.width = 113;
            img.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=' : '&noCache=') + (+new Date()).toString(36));
            img.setAttribute('_src', urlPrefix + list[i].url);
            domUtils.addClass(icon, 'icon');
            domUtils.addClass(del_icon, 'seven-del-icon');

            item.appendChild(img);
            item.appendChild(icon);
            item.appendChild(del_icon); // 添加删除按钮 add at 2021-03-22 by siwenwei
            this.list.insertBefore(item, this.clearFloat);
        }
    }
}

  2. 添加删除按钮样式

    ueditor\dialogs\image\image.css样式文件中添加如下样式代码：

    /* 添加删除按钮样式  at 2021-03-22 by siwenwei */
#online li .seven-del-icon {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    z-index: 3;
    color: #ffffff;
    display: inline;
    font-size: 17px;
    font-weight: 900;
    line-height: 15.5px;
    padding: 3px 3px;
    text-align: center;
    background-color: #d9534f;
    opacity: 1;
}

#online li .seven-del-icon:hover {
    color: #f5f5f5;
    opacity: 0.7;
}

  3. 配置删除图片的URL
    ueditor/ueditor.config.js配置中添加一个配置项imageRemoveActionName，假如imageRemoveActionName设置为removeimage，那么ueditor删除图片的请求地址就是：/ueditor?action=removeimage
    在这里插入图片描述
    自此前端的配置完成，按照上面的配置，点击删除按钮删除图片，发给服务器的请求如下：

    请求方法: POST
    请求URL: /ueditor?action=removeimage
    固定提交的表单数据: path=图片在服务器的存储路径
    如果ueditor初始化配置了serverparam，那么还会附带配置的serverparam的参数

    剩下的只需要后端服务处理这个请求，返回删除结果的json格式数据如下：

    {
    state: true,    // 删除的结果 成功为true 否则为false
    msg:""          // 成功或者错误信息
}

  4. 显示效果
    在这里插入图片描述
    在这里插入图片描述

  • 添加删除附件功能

  1. 添加删除按钮和事件处理
    和添加删除图片一个思路，要修改的js文件是：ueditor/dialogs/attchment/attchment.js，修改pushData函数，代码如下：

    /* 添加图片到列表界面上 */
pushData: function (list) {
    var i, item, img, filetype, preview, icon, _this = this,
        urlPrefix = editor.getOpt('fileManagerUrlPrefix');

    var remove_w_file = function () {
        var el_del = $(this);
        try {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
            window.event.preventDefault();
            window.event.stopPropagation();
        } finally {
            if (!confirm("确定要删除吗？")) return;
            $.post(editor.getActionUrl(editor.getOpt('fileRemoveActionName')), utils.extend({
                "path": el_del.attr("data-url")
            }, editor.queryCommandValue('serverparam')), function (r) {
                if (r.state) {
                    el_del.parent().remove();
                } else {
                    alert(r.msg);
                }
            }, "json");
        }
    }
    for (i = 0; i < list.length; i++) {
        if (list[i] && list[i].url) {
            item = document.createElement('li');
            icon = document.createElement('span');
            del_icon = document.createElement('span'); // 添加删除按钮 add at 2021-03-22 by siwenwei
            del_icon.innerHTML = 'x';
            del_icon.setAttribute('data-url', list[i].url)
            $(del_icon).click(remove_w_file);
            filetype = list[i].url.substr(list[i].url.lastIndexOf('.') + 1);

            if ("png|jpg|jpeg|gif|bmp".indexOf(filetype) != -1) {
                preview = document.createElement('img');
                domUtils.on(preview, 'load', (function (image) {
                    return function () {
                        _this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight);
                    };
                })(preview));
                preview.width = 113;
                preview.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=' : '&noCache=') + (+new Date()).toString(36));
            } else {
                var ic = document.createElement('i'),
                    textSpan = document.createElement('span');
                textSpan.innerHTML = list[i].url.substr(list[i].url.lastIndexOf('/') + 1);
                preview = document.createElement('div');
                preview.appendChild(ic);
                preview.appendChild(textSpan);
                domUtils.addClass(preview, 'file-wrapper');
                domUtils.addClass(textSpan, 'file-title');
                domUtils.addClass(ic, 'file-type-' + filetype);
                domUtils.addClass(ic, 'file-preview');
            }
            domUtils.addClass(icon, 'icon');
            domUtils.addClass(del_icon, 'seven-del-icon');
            item.setAttribute('data-url', urlPrefix + list[i].url);
            if (list[i].original) {
                item.setAttribute('data-title', list[i].original);
            }

            item.appendChild(preview);
            item.appendChild(icon);
            item.appendChild(del_icon);
            this.list.insertBefore(item, this.clearFloat);
        }
    }
}

  2. 删除按钮样式
    ueditor/dialogs/attchment/attchment.css样式文件中添加如下样式代码：

    /* 添加删除按钮样式  at 2021-03-22 by siwenwei */
#online li .seven-del-icon {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    z-index: 3;
    color: #ffffff;
    display: inline;
    font-size: 17px;
    font-weight: 900;
    line-height: 15.5px;
    padding: 3px 3px;
    text-align: center;
    background-color: #d9534f;
    opacity: 1;
}

#online li .seven-del-icon:hover {
    color: #f5f5f5;
    opacity: 0.7;
}

  3. 配置删除附件URL
    ueditor/ueditor.config.js配置中添加一个配置项fileRemoveActionName，假如fileRemoveActionName设置为removefile，那么ueditor删除图片的请求地址就是：/ueditor?action=removefile
    在这里插入图片描述

    自此前端的配置完成，按照上面的配置，点击删除按钮删除图片，发给服务器的请求如下：

    请求方法: POST
    请求URL: /ueditor?action=removefile
    固定提交的表单数据: path=图片在服务器的存储路径
    如果ueditor初始化配置了serverparam，那么还会附带配置的serverparam的参数

    剩下的只需要后端服务处理这个请求，返回删除结果的json格式数据如下：

    {
    state: true,    // 删除的结果 成功为true 否则为false
    msg:""          // 成功或者错误信息
}

  4. 显示效果
    在这里插入图片描述
    在这里插入图片描述

hotswwkyo
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Ueditor上传图片+图片回显+图片在线管理配置说明
06-30
前天我项目中要用到文本编辑，然后看大家都在使用ueditor ，就下载并配置了下，发现一些问题。如图片无法显示、图片上传后插入文本中无法显示、 在线管理中的图片无法显示等问题。发现网上的资料都不完整，现整理了下，后期会上传项目代码方便大家参考
PHPCMS V9.6.6 修改版
08-17
PHPCMS V9.6.6 修改版 修改内容列表： 1.修改后台界面 2.修改前台界面 3.修改phpcms目录为cms 4.去掉phpsso模块 5.手机电脑同时生成html 6.安装文件不检查index.html 7.安装完删除安装目录 8.安装删除友情链接、广告数据 9.添加支持https 10.整合ueditor编辑器 11.ueditor整合上传水印 12.ueditor上传储存数据 13.附件选择框UI 14.优化附件选择器界面 15.添加讯飞关键词获取 16.添加百度关键词获取API 20200725添加站点自定义字段、栏目自定义字段 20200728内容管理添加回收站 20200815添加ueditor编辑器上传参数 删除dialog.js
百度编辑器Ueditor1.4.3的使用
RJSong
01-10 3177
1、首先第一步去到http://ueditor.baidu.com/website/download.html下载并解压 [1.4.3.3 Jsp 版本] UTF-8版 GBK版  2、创建一个项目工程，在jsp文件中引入Ueditor相关的js文件 3、在ueditor文件夹下配置config.json文件，其中百度编辑器主要的配置项是 UrlPrefix 和 Path
改造ueditor 在线图片功能 添加 删除 功能
qq_25287347的博客
06-29 3980
var imgPath = ""; /* 在线图片 */ function OnlineImage(target) { this.container = utils.isString(target) ? document.getElementById(target) : target; this.init(); } OnlineIma
ueditor上传图片配置成功，但是如何删除无用的图片
weixin_30371875的博客
02-23 707
我使用ueditor作为富文本编辑器，配置已经好了，上传功能也好了。现在的问题是当使用ueditor上传图片的时候，选择了图片就立刻上传到指定的文件夹里，而后续即使没有保存该篇文章内容，即取消操作，图片还是上传了，就相当于上传的图片是无用的，没有给任何文章或者用户来使用，该如何删除这些无用的图片啊？限制图片的自动上传？研究了半天，终于搞定了，主要思路是先把图片存放到临时文件夹ueditor_tem...
.NET下为百度文本编辑器UEditor增加图片删除功能示例
10-27
今天下载了目前最新版1.2.5为版本看更新记录，主要是对表格做个修改，我下载用上，我靠，上传图片的删除功能给取消了，下面与大家分享下增加图片删除功能示例
.NET下为百度文本编辑器UEditor增加图片删除功能
u013457194的博客
09-18 1121
最近写了个项目,用到了UEditor,然而UE并没有文件删除功能 然后网上找如何添加 找半天只能找到一个1.2.X的所以就模仿PHP的 改成了.NET的PHP原文第一步 (添加后台删除地址)  打开 ueditor/net/config.json  添加参数     /* 上传图片配置项 */     'imageDelUrl' : '/Admin/Home/DelPic', //在线图片管理
ueditor去掉上传功能_UEditor1.4.3.3实现图片上传、删除功能
bobo的博客
12-24 678
1、下载ueditor1.4.3.3 UTF-8的版本2、新建一个项目，在项目中添加UEditor，把下载好的插件都放在ueditor这个文件夹中，在进行一些基本的配置3、在根目录下新建一个为index.aspx的网页，在进行如下的配置，引用三个js文件，在form表单里面用csript来构造一个页面，在让var ue = UE.getEditor("container");来初始化这个页面。运行...
Ueditor删除无用图片详解
铁柱的博客
07-06 1955
一、前言       在上一篇文章 yii2.0使用ueditior完成上传单张，多张图片，上传视频等操作 之后，博主进行了大量的测试，偶然发现图片文件夹越来越大。。       是的，比如上传了a.png和b.jpg，等到要提交的时候，又把a.png在编辑器中给删除了（back...
ueditor编辑器的坑（视频空白/保存无数据/无法删除/不能插入百度动态地图/有序列表显示问题）
热门推荐
龚清林的博客
02-08 1万+
ueditor编辑器的坑（视频空白/保存无数据/无法删除/不能插入百度动态地图/有序列表显示问题）
ueditor编辑器图片上传配置及问题解决
最新发布
J_R___的博客
12-03 1517
4.将ueditor/1.4.3/jsp/lib中的5个jar包拷贝到工程下WebRoot/WEB-INF/lib文件夹中。二者合起来为保存图片的完整路径（可在../Tomcat 7.0/webapps/对应工程对应目录下找到）在web-xml中修改为重写的过滤器，将原来的注释掉。5.struts2的过滤器会导致图片上传后显示“编辑器转为显示html发现是因为2中的。（刚才试了下，不加也能正常插入图片）路径少了一个斜杠/导致保存路径丢失。并删除掉原有的低版本的io。图片上传后显示不出来的问题。
百度富文本编辑器UEditor 关闭Tab图片搜索，在线图片功能
Jrena的博客
04-01 270
下载的是1.4.3 php版本 使用的时候发现这两个功能无法使用，且现在用处也不大，索性就把他关了 网上找了一堆教程。都不行。自己尝试改了下 路径在 dialogs\image\image.js 注释这段代码 约 24 和 25行 <span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span> <span class="tab" data-co
UEditor1.4.3.3实现图片上传、删除功能
weixin_30483495的博客
12-16 268
1、下载ueditor1.4.3.3 UTF-8的版本 2、新建一个项目，在项目中添加UEditor，把下载好的插件都放在ueditor这个文件夹中，在进行一些基本的配置 3、在根目录下新建一个为index.aspx的网页，在进行如下的配置，引用三个js文件，在form表单里面用csript来构造一个页面，在让var ue = UE.getEditor("container");来初始...
Ueditor 单图、多图、视频、附件的上传及在线管理总结
qq_43419105的博客
06-03 3846
简介 上一篇文章已经提到了Ueditor百度的富文本插件的好处，在这里就不多啰嗦了，主要来说说Ueditor在java开发中针对Ueditor 单图、多图、视频的上传及其所对应的在线管理问题及代码的总结。 Ueditor在进行单图、多图、视频、文件上传的时候都是以String类型的文件附件的形式上传的。可以简单总结三点： 第一步：首先看 config.json中针对上传图片配置项设置，查看i...
VUE2.0集成UEditor富文本编辑器实现图片搜索及在线管理
Bumblebee_Bee的博客
07-12 569
VUE2.0集成UEditor富文本编辑器实现图片搜索及在线管理
UEditor编辑器常见问题的解决办法
qq_33298964的博客
08-25 2859
UEditor编辑器常见问题的解决办法，提升交互体验
百度富文本编辑器UMEditor 添加视频无法删除 解决方法
qq_29096549的博客
07-13 2710
var child = range.startContainer; if (child != null) { if (child.tagName == "VIDEO") { domUtils.remove(child); } } 给编辑器的 ueditor.all.js 里的 "keydown"监听事件里加上方代码即可.
UEditor编辑器任意文件上传
08-31
UEditor编辑器存在一个高危漏洞，即在抓取远程数据源时未对文件后缀名做验证，导致任意文件写入漏洞。黑客可以利用这个漏洞，在服务器上执行任意指令。这个漏洞只影响.NET版本的UEditor，其他版本暂时不受影响。 为了利用这个漏洞，黑客可以在UEditor编辑器中的shell地址处填写服务器上的图片马地址，构造成特定格式。例如，在URL中将图片马地址后缀更改为.aspx，绕过上传使其解析为aspx文件，从而达到任意文件上传的目的。 为了防止这个漏洞被利用，建议开发者及时更新UEditor编辑器的最新版本，并确保在抓取远程数据源时对文件后缀名进行验证。此外，也可以限制用户上传的文件类型和大小，加强服务器的安全配置，以减少潜在的风险。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Ueditor编辑器任意文件上传漏洞](https://blog.csdn.net/m0_51468027/article/details/126077427)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Django集成百度富文本编辑器uEditor攻略](https://download.csdn.net/download/weixin_38613154/14865210)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值