给ueditor加上数据库产品图片列表功能
1、在\ueditor\dialogs\image\image.html里的24行<span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>下面
加上：
<span class="tab" data-content-id="DBimg">数据库[商品]图片</span>
在“在线图片”约95行下面加上：
2、在\ueditor\dialogs\image\image.js中约66行“online”块下面加上：
/* 数据库[商品]图片 */
3、在\ueditor\dialogs\image\image.css里面加上样式：
/* 数据库[商品图片]管理样式 */
4、在\ueditor\dialogs\image\image.js约107行加入以下代码：
5、到此，代码结束，自个爽去吧。
加上：
<span class="tab" data-content-id="DBimg">数据库[商品]图片</span>
在“在线图片”约95行下面加上：
<!-- 在线图片 -->
<div id="online" class="panel">
<div id="imageList"><var id="lang_imgLoading"></var></div>
</div>
2、在\ueditor\dialogs\image\image.js中约66行“online”块下面加上：
case 'DBimg':
setAlign(editor.getOpt('imageManagerInsertAlign'));
dbImage = dbImage || new DBImage('DBimageList');
dbImage.reset();
break;
在“在线图片”972行后面加上：/* 数据库[商品]图片 */
/* 数据库[商品]图片 */
function DBImage(target) {
this.container = utils.isString(target) ? document.getElementById(target) : target;
this.init();
}
DBImage.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('DBimageList'), 'scroll', function(e){
var panel = this;
if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) {
_this.getImageData();
}
});
/* 选中图片 */
domUtils.on(this.container, 'click', function (e) {
var target = e.target || e.srcElement,
li = target.parentNode;
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({
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, 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);
//_this.scale(image, 170, 130);
}
})(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);
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;
}
};
3、在\ueditor\dialogs\image\image.css里面加上样式：
/* 数据库[商品图片]管理样式 */
/* 数据库[商品图片]管理样式 */
#DBimg {
width: 100%;
height: 336px;
padding: 10px 0 0 0;
}
#DBimg #DBimageList{
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
#DBimg ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#DBimg li {
float: left;
display: block;
list-style: none;
padding: 0;
width: 113px;
height: 113px;
margin: 0 0 9px 9px;
*margin: 0 0 6px 6px;
background-color: #eee;
overflow: hidden;
cursor: pointer;
position: relative;
}
#DBimg li.clearFloat {
float: none;
clear: both;
display: block;
width:0;
height:0;
margin: 0;
padding: 0;
}
#DBimg li img {
cursor: pointer;
}
#DBimg li .icon {
cursor: pointer;
width: 113px;
height: 113px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
border: 0;
background-repeat: no-repeat;
}
#DBimg li .icon:hover {
width: 107px;
height: 107px;
border: 3px solid #1094fa;
}
#DBimg li.selected .icon {
background-image: url(images/success.png);
background-image: url(images/success.gif)\9;
background-position: 75px 75px;
}
#DBimg li.selected .icon:hover {
width: 107px;
height: 107px;
border: 3px solid #1094fa;
background-position: 72px 72px;
}
4、在\ueditor\dialogs\image\image.js约107行加入以下代码：
case 'DBimg':
list = dbImage.getInsertList();
break;
5、到此，代码结束，自个爽去吧。
- 没有评论
