.NET下为百度文本编辑器UEditor增加图片删除功能
[摘要:比来写了个项目,用到了UEditor,但是UE并出有文件删除功效 然后网上找若何增加 找半天只能找到一个1.2.X的 以是便摹仿PHP的 改成了.NET的 PHP本文 第一步 (增加背景删除地点)]
最近写了个项目,用到了UEditor,然而UE并没有文件删除功能 然后网上找如何添加 找半天只能找到一个1.2.X的
所以就模仿PHP的 改成了.NET的
PHP原文
第一步 (添加后台删除地址)
打开 ueditor/net/config.json
添加参数
/* 上传图片配置项 */'imageDelUrl' : '/Admin/Home/DelPic', //在线图片管理删除操作请求url //这一行是添加的"imageActionName": "uploadimage", /* 执行上传图片的action名称 */"imageFieldName": "upfile", /* 提交的图片表单名称 */"imageMaxSize": 2048000, /* 上传大小限制,单位B */
第二步 增加js删除方法
放到ueditor/dialogs/image/image.html里面
//新增在线管理删除图片function uedel(path, id){if(confirm('您确定要删除它吗?删除后不可恢复!')){ var url = editor.getOpt('imageDelUrl'); //重点是这句话 这句话可以将第一步添加的参数提取出来$.post(url,{'path':path},function(data){if (data.state == 'success') {alert(data.message);$("#"+id).parent("li").remove(); }else{alert(data.message);}},'json'); } }
第三步:
修改ueditor/dialogs/image/image.js文件(大约902行)
/* 添加图片到列表界面上 */pushData: function (list) {var i, item, img, icon, _this = this,urlPrefix = editor.getOpt('imageManagerUrlPrefix');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');//开始del = document.createElement('a');del.innerHTML = '删除';domUtils.addClass(del, 'del');var delid = 'imagelist_' + i;del.setAttribute('id', delid);del.setAttribute('href', 'javascript:;');del.setAttribute('onclick', 'uedel("' + list[i].url + '","' + delid + '")'); //结束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');item.appendChild(img);item.appendChild(icon);//Edititem.appendChild(del); //为了把a标签加载进去this.list.insertBefore(item, this.clearFloat);}}},
最后 修改样式
编辑 ueditor/dialogs/image/image.css
在末尾添加
/* 新增在线管理删除图片样式*/#online li a.del { 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; }
最后贡献Controller
[HttpPost]public ActionResult DelPic(string path) {string realPath = Server.MapPath("/Content/ueditor/net/") + path; //这里能文件的真实获取路径Dictionary<String,String> maps = new Dictionary<string,string>();bool bl = System.IO.File.Exists(realPath);if (bl){System.IO.File.Delete(realPath);maps.Add("state", "success");maps.Add("message", "删除完成");return Json(maps);}else{maps.Add("state", "error");maps.Add("message", "删除失败");return Json(maps);}}
转载于:https://www.cnblogs.com/micenote/p/5669312.html
.NET下为百度文本编辑器UEditor增加图片删除功能相关推荐
- ue html编辑器获取纯文本,百度文本编辑器(Ueditor)怎么获取内容?
百度文本编辑器(Ueditor)是由百度开发的所见即所得文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和使用代码.那么,Ueditor怎么获取内容呢?不少刚接 ...
- themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
- KindEditor图片空间增加图片删除功能
这次试着修改了下KindEditor的图片空间管理,加了一个删除图片的功能进去. 第一步,开放插件显示图片空间功能,代码如下: // 编辑器加载 $.extend(KindEditor.options ...
- 百度文本编辑器ueditor v1.2.3.0使用方法及配置(图片上传功能、目录更改)
下载ueditor1_2_3_0-utf8-net.zip 放在根目录中虽然可以直接用但文件比较乱所以需要放在一个目录中,在网站下新建目录BaiduUEditor,将解压出的文件放到目录中. 修改ed ...
- 百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
- Django下富文本编辑器Ueditor的配置和使用
1.前言 "人生苦短,我用Python",Python作为一门"万能"的脚本语言,深受各个技术层级的程序猿的喜爱,而Django作为最受欢迎的Python的We ...
- 百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
最新文章
- 关于MultipleOutputFormat若干小记
- 7-2 作业调度算法--短作业优先 (30 分)(思路+详解+vector容器做法)Come Baby!!!!!!!!!!!
- java log 断点_项目中常见的log日志调用
- mysql raid_DBA们应该知道的RAID卡知识_MySQL
- [网站seo优化] 史上最全增加外链的方法!
- 10 人,2 个月 | 虾米音乐的监控体系升级之路
- ImageButton单击切换按钮图片
- Payroll Calculation的Process Rule
- [C++] - 中的复制初始化(copy initialization)
- 使用SQLyog连接MySQL数据库
- 这位 GitHub 冠军项目背后的“老男人”,堪称 10 倍程序员本尊!
- kafka jar包_Windows环境下Flink消费Kafka实现热词统计
- 面试经验|传音控股自动化测试
- SEO与SEM的区别和联系
- 卡西欧科学计算机使用方法,科学计算器的使用方法
- JESD204B SUBCLASS1确定性延时参数的计算
- 微信小程序时间标签和时间范围的联动
- JAVA毕业设计科研成果管理系统设计与实现计算机源码+lw文档+系统+调试部署+数据库
- 《SolidWorks 2014中文版机械设计从入门到精通》——1.4 操作环境设置
- 电蚊拍一天用30-50次?
热门文章
- 有哪些朋友圈励志说说短句?
- 鲍鱼的“几头”是什么意思?什么样的好吃?
- 有房贷的房子怎么卖?
- 过去几年接触了很多小公司小品牌
- 创业者都有一个共同的特质,他想做事,就立刻做
- 什么样的人适合做合伙人?
- 那些高曝光的Annotation(@ComponentScan、@PropertySource与@PropertySources、@Import与ImportResource)
- 最小路径问题_Floyd
- java中#{}和${}的区别
- 在AWS RDS SQL Server中恢复数据