改造ueditor 在线图片功能 添加 删除 功能
来源：互联网 发布：音画同步软件 编辑：程序博客网 时间：2024/05/16 08:40
var imgPath = ""; /* 在线图片 */ function OnlineImage(target) { this.container = utils.isString(target) ? document.getElementById(target) : target; this.init(); } OnlineImage.prototype = { init: function () { this.reset(); this.initEvents(); }, /* 初始化容器 */ initContainer: function () { this.container.innerHTML = ''; this.list = document.createElement('ul'); this.clearFloat = document.createElement('li'); domUtils.addClass(this.list, 'list'); domUtils.addClass(this.clearFloat, 'clearFloat'); this.list.appendChild(this.clearFloat); this.container.appendChild(this.list); }, /* 初始化滚动事件,滚动到地步自动拉取数据 */ initEvents: function () { var _this = this; /* 滚动拉取图片 */ domUtils.on($G('imageList'), 'scroll', function(e){ var panel = this; if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) { _this.getImageData(); } }); /* 点击搜索按钮 */ domUtils.on($G('sub'), 'click', function () { var key = $G('sel').value; if (key && key != lang.sel) { _this.reset() _this.getImageData(); } }); /* 点击缩略图按妞 */ domUtils.on($G('clo'), 'click', function () { var src =""; $(".selected>img").each(function (i,v) { src += "srcs=" + v.src.substr(v.src.lastIndexOf('/Picasa')) + "&"; }) src = src.substring(0, src.length - 1); $.ajax({ url: '/Attachment/Thumbnail', data: src, type:'post', success: function (data) { alert(data.Message); } }); }); /* 搜索框聚焦 */ domUtils.on($G('sel'), 'focus', function () { key = $G('sel').value; if (key && key == lang.sel) { $G('sel').value = ''; } }); /* 搜索框回车键搜索 */ domUtils.on($G('sel'), 'keydown', function (e) { var keyCode = e.keyCode || e.which; if (keyCode == 13) { $G('sub').click(); } }); /*新建文件夹*/ domUtils.on($G('newfolder'), 'click', function () { var index =layer.prompt({ title: '新建文件夹', formType: 0//prompt风格，支持0-2 }, function (tex) { $.ajax({ url: "/Picasa/controller.ashx?action=newfolder", data: { "url": tex, "getpath": $("#getpath").val() }, success: function (data) { alert(data.state); if (data.state = "新建成功") { layer.close(index); } _this.reset() _this.getImageData(); } }); }); }); uploader.on('fileQueued', function (file,data) { uploader.options.formData.url = $("#getpath").val(); uploader.upload(); uploader.on('uploadSuccess', function (file, data) { alert(data.state); if (data.state = "添加图片成功") { _this.reset(); _this.getImageData(); } }); }) /*返回上级*/ domUtils.on($G('back'), 'click', function (e) { imgPath = $("#getpath").val().substr(0, $("#getpath").val().lastIndexOf('/')); $("#getpath").val(imgPath); _this.reset(); _this.getImageData(); }); /* 选中文件 */ domUtils.on(this.container, 'click', function (e) { var target = e.target || e.srcElement, li = target.parentNode; var url = editor.getActionUrl(editor.getOpt('imageManagerActionName')), isJsonp = utils.isCrossDomainUrl(url); imgPath = $(li.innerHTML).attr("_src"); if (imgPath.indexOf('.') == -1) { ajax.request(url, { 'dataType': isJsonp ? 'jsonp':'', 'data': utils.extend({ imgPath: imgPath, seek:"", start: this.listIndex, size: this.listSize }), 'method': 'get' }); imgPath = imgPath.replace("/Picasa/upload/image", ""); $("#getpath").val(imgPath); _this.reset() _this.getImageData(); } if (li.tagName.toLowerCase() == 'li') { if (domUtils.hasClass(li, 'selected')) { domUtils.removeClasses(li, 'selected'); } else { domUtils.addClass(li, 'selected'); } } }); }, /* 初始化第一次的数据 */ initData: function () { /* 拉取数据需要使用的值 */ this.state = 0; this.listSize = editor.getOpt('imageManagerListSize'); this.listIndex = 0; this.listEnd = false; /* 第一次拉取数据 */ this.getImageData(); }, /* 重置界面 */ reset: function() { this.initContainer(); this.initData(); }, /* 向后台拉取图片列表数据 */ getImageData: function () { var _this = this; if(!_this.listEnd && !this.isLoadingData) { this.isLoadingData = true; var url = editor.getActionUrl(editor.getOpt('imageManagerActionName')), isJsonp = utils.isCrossDomainUrl(url); ajax.request(url, { 'timeout': 100000, 'dataType': isJsonp ? 'jsonp':'', 'data': utils.extend({ imgPath: imgPath, seek: $G('sel').value, start: this.listIndex, size: this.listSize }, editor.queryCommandValue('serverparam')), 'method': 'get', 'onsuccess': function (r) { try { var json = isJsonp ? r:eval('(' + r.responseText + ')'); if (json.state == 'SUCCESS') { _this.pushData(json.list); _this.listIndex = parseInt(json.start) + parseInt(json.list.length); if(_this.listIndex >= json.total) { _this.listEnd = true; } _this.isLoadingData = false; } } catch (e) { if(r.responseText.indexOf('ue_separate_ue') != -1) { var list = r.responseText.split(r.responseText); _this.pushData(list); _this.listIndex = parseInt(list.length); _this.listEnd = true; _this.isLoadingData = false; } } }, 'onerror': function () { _this.isLoadingData = false; } }); } }, /* 添加图片到列表界面上 */ pushData: function (list) { var i, item, img, btns, 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'); 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.indexOf('.') == -1 ? 'upload/folder-64.gif' : list[i].url)); img.setAttribute('_src', urlPrefix + list[i].url); icon.setAttribute('title',list[i].url.substr(list[i].url.lastIndexOf('/') + 1)); domUtils.addClass(icon, 'icon'); item.appendChild(img); item.appendChild(icon); /*添加名称*/ item.appendChild($("<div style='position:absolute;text-align: center;top: 113px;left: 0px;width: 113px;background-color: white;'>" + list[i].url.substr(list[i].url.lastIndexOf('/') + 1) + "</div>")[0]); /* 添加删除功能 */ item.appendChild($("<span class='delbtn' url='" + list[i].url + "'>✖</span>").click(function () { var del = $(this); try { window.event.cancelBubble = true; //停止冒泡 window.event.returnValue = false; //阻止事件的默认行为 window.event.preventDefault(); //取消事件的默认行为 window.event.stopPropagation(); //阻止事件的传播 } finally { if (!confirm("确定要删除吗？")) return; $.post(editor.getOpt("serverUrl") + "?action=deleteimage", { "path": del.attr("url") }, function (data) { if (data.state == "ok") del.parent().remove(); else alert(data); }); } })[0]); this.list.insertBefore(item, this.clearFloat); } } }, /* 改变图片大小 */ scale: function (img, w, h, type) { var ow = img.width, oh = img.height; if (type == 'justify') { if (ow >= oh) { img.width = w; img.height = h * oh / ow; img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px'; } else { img.width = w * ow / oh; img.height = h; img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px'; } } else { if (ow >= oh) { img.width = w * ow / oh; img.height = h; img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px'; } else { img.width = w; img.height = h * oh / ow; img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px'; } } }, getInsertList: function () { var i, lis = this.list.children, list = [], align = getAlign(); for (i = 0; i < lis.length; i++) { if (domUtils.hasClass(lis[i], 'selected')) { var img = lis[i].firstChild, src = img.getAttribute('_src'); list.push({ src: src, _src: src, alt: src.substr(src.lastIndexOf('/') + 1), floatStyle: align }); } } return list; } };
1 0
- 改造ueditor 在线图片功能 添加 删除 功能
- 增加Ueditor在线管理图片删除功能
- php版给UEditor的图片在线管理栏目增加图片删除功能
- fckeditor添加删除图片功能
- Ueditor屏蔽图片上传功能
- FCKeditor中添加删除图片的功能！
- FCKeditor中添加删除图片的功能！
- ueditor多图片上传中去掉在线管理和图片搜索Tab页功能
- ueditor多图片上传中去掉在线管理和图片搜索Tab页功能
- 添加QQ在线功能
- 对flume1.6改造,添加Taildir功能
- 给ueditor增加删除文件功能
- 从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能
- ueditor - 配置实现上传图片的功能
- UEditor ASP.NET图片上传功能配置
- .NET下为百度文本编辑器UEditor增加图片删除功能
- .NET下为百度文本编辑器UEditor增加图片删除功能
- 在jsp页面中添加富文本编译器（ueditor）+ 图片上传功能
- hibernate中boolean的问题
- Android 支付宝以及微信支付快速接入流程
- 第三方登陆——OAuth2.0协议
- GLSL 色彩特效
- awk脚本
- 改造ueditor 在线图片功能 添加 删除 功能
- 使用 async 控制并发
- c++动态联编和静态联编
- 之前写的链表的增删改查
- C语言内存浅谈
- java 时间格式转换
- Cordova跨平台开发入门
- Latex参考文献引用顺序排序
- 使用Google Test的一个简单例子
