改造ueditor 在线图片功能添加删除功能

 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;}};

改造ueditor 在线图片功能添加删除功能相关推荐

Vue之通过连接数据库的接口获取列表实现添加删除功能
把最近学习vue的一些知识点记录下来,今天记录一下Vue通过vue-resource连接数据库接口渲染列表和添加删除功能首先我们得引入vue的版本文件和vue-resource.js,注意:vue- ...
Qt5.10实现图片转文字功能添加截图功能代码分析
继续更新之前的图片转文字功能,并添加截图功能代码. 这里我仅仅只是先截取全屏图片,点击截图功能就可以将屏幕截图.后续功能待完善. 我们来分析一下,这个是怎么实现的. 源码下载地址:ocr2019121 ...
【文件和递归】File：创建功能，删除功能，重命名功能，判断功能，基本获取功能，高级获取功能，断有没有.png后的文件，递归：归注意事项，用代码求出实现5的阶乘，不死神兔案例，递归删除带内容的目录
一. 文件我们想要实现IO操作,就必须要知道硬盘上文件的表现形式 Java提供了一个类让我们操作硬盘上的文件:File File也就是文件表现形式 1.File:文件和目录(文件夹)路径名的抽象表示 ...
自定义Uview的Album 相册组件添加删除功能
功能需要,直接使用了Album组件不用自己去调样式了,直接可以大图预览,对超出限制数量的照片可以折叠修改组件先找到组件中图片的位置.添加一格删除图标,给图标添加点击事件,我这里显示图片的地址是包 ...
C1—— cesium 离线开发去除在线图片自己添加背景图
第一步: vsCode全局搜索createDefaultImageryProviderViewModels将providerViewModels里push的全部注释掉(主要是Cesium.js的). ...
Android 实现图片相册选择+拍照，并在选中的图片右上角添加删除图标。
效果图: 一.在app的build中引入相应的框架 //recyclerview implementation "androidx.recyclerview:recyclerview:1.1 ...
图片按钮: 添加+删除+替换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
php ueditor 去掉在线管理,UEditor 添加在线管理图片删除功能 (转载)
第一,需要添加一个 php 文件来实现删除功能,文件添加到: ueditor\php\action_delete.php 代码内容: /*--------------------------- * a ...
uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理
前言本帖所有内容均用于学习使用,如有涉及侵权,请看到后联系我进行删帖上图片环境 "axios": "^0.21.1", "element-ui& ...

改造ueditor 在线图片功能添加删除功能

改造ueditor 在线图片功能添加删除功能相关推荐

最新文章

热门文章

改造ueditor 在线图片功能 添加 删除 功能

改造ueditor 在线图片功能 添加 删除 功能相关推荐

最新文章

热门文章

改造ueditor 在线图片功能添加删除功能

改造ueditor 在线图片功能添加删除功能相关推荐