GT wiki-like image inserting for nicEdit
parent
5fa03aebf9
commit
e223cf90e8
207
nicEdit.js
207
nicEdit.js
|
@ -336,7 +336,7 @@ var nicEditor = bkClass.extend({
|
|||
this.loadedPlugins.push(new plugins[i].p(this,plugins[i].o));
|
||||
}
|
||||
nicEditors.editors.push(this);
|
||||
bkLib.addEvent(document.body,'mousedown', this.selectCheck.closureListener(this) );
|
||||
bkLib.addEvent(document.body, 'mousedown', this.selectCheck.closureListener(this));
|
||||
},
|
||||
|
||||
panelInstance : function(e,o) {
|
||||
|
@ -913,11 +913,11 @@ var nicEditorPane = bkClass.extend({
|
|||
this.elm = elm;
|
||||
this.pos = elm.pos();
|
||||
|
||||
this.contain = new bkElement('div').setStyle({zIndex : '99999', overflow : 'hidden', position : 'absolute', left : this.pos[0]+'px', top : this.pos[1]+'px'})
|
||||
this.pane = new bkElement('div').setStyle({fontSize : '12px', border : '1px solid #ccc', 'overflow': 'hidden', padding : '4px', textAlign: 'left', backgroundColor : '#ffffc9'}).addClass('pane').setStyle(options).appendTo(this.contain);
|
||||
this.contain = new bkElement('div').setStyle({zIndex: '999', overflow: 'hidden', position: 'absolute', left: this.pos[0]+'px', top : this.pos[1]+'px'})
|
||||
this.pane = new bkElement('div').setStyle({fontSize: '12px', border: '1px solid #ccc', overflow: 'hidden', padding: '4px', textAlign: 'left', backgroundColor : '#ffffc9'}).addClass('pane').setStyle(options).appendTo(this.contain);
|
||||
|
||||
if(openButton && !openButton.options.noClose) {
|
||||
this.close = new bkElement('div').setStyle({'float' : 'right', height: '16px', width : '16px', cursor : 'pointer'}).setStyle(this.ne.getIcon('close',nicPaneOptions)).addEvent('mousedown',openButton.removePane.closure(this)).appendTo(this.pane);
|
||||
this.close = new bkElement('div').setStyle({float: 'right', height: '16px', width: '16px', cursor: 'pointer'}).setStyle(this.ne.getIcon('close',nicPaneOptions)).addEvent('mousedown',openButton.removePane.closure(this)).appendTo(this.pane);
|
||||
}
|
||||
|
||||
this.contain.noSelect().appendTo(document.body);
|
||||
|
@ -982,9 +982,23 @@ var nicEditorAdvancedButton = nicEditorButton.extend({
|
|||
},
|
||||
|
||||
addForm : function(f,elm) {
|
||||
this.form = new bkElement('form').addEvent('submit',this.submit.closureListener(this));
|
||||
this.form = new bkElement('form').setAttributes({className: 'niceabf'}).addEvent('submit',this.submit.closureListener(this));
|
||||
this.pane.append(this.form);
|
||||
this.inputs = {};
|
||||
if (!document._nicCss) {
|
||||
document._nicCss = document.createElement('style');
|
||||
document._nicCss.appendChild(document.createTextNode(
|
||||
'.niceabf table { border-collapse: collapse; }\n'+
|
||||
'.niceabf td { padding: 2px 5px 2px 0; }\n'+
|
||||
'.niceabf td.h { vertical-align: top; padding-top: 4px; }\n'+
|
||||
'.niceabf h2 { font-size: 14px; font-weight: bold; padding: 0; margin: 0; }\n'+
|
||||
'.niceabf input, .niceabf select { vertical-align: middle; font-size: 13px; border: 1px solid #ccc; }\n'+
|
||||
'.niceabf textarea { border: 1px solid #ccc; }\n'+
|
||||
'.niceabf input.button { background-color: #efefef; margin: 3px 0; }\n'
|
||||
));
|
||||
document.getElementsByTagName('head')[0].appendChild(document._nicCss);
|
||||
}
|
||||
var tab, tr, td;
|
||||
|
||||
for(itm in f) {
|
||||
var field = f[itm];
|
||||
|
@ -998,30 +1012,42 @@ var nicEditorAdvancedButton = nicEditorButton.extend({
|
|||
var type = f[itm].type;
|
||||
|
||||
if(type == 'title') {
|
||||
new bkElement('div').setContent(field.txt).setStyle({fontSize : '14px', fontWeight: 'bold', padding : '0px', margin : '2px 0'}).appendTo(this.form);
|
||||
new bkElement('h2').setContent(field.txt).appendTo(this.form);
|
||||
} else {
|
||||
var contain = new bkElement('div').setStyle({overflow : 'hidden', clear : 'both'}).appendTo(this.form);
|
||||
if (!tab) {
|
||||
tab = new bkElement('table').appendTo(this.form);
|
||||
}
|
||||
tr = new bkElement('tr').appendTo(tab);
|
||||
if(field.txt) {
|
||||
new bkElement('label').setAttributes({'for' : itm}).setContent(field.txt).setStyle({margin : '2px 4px', fontSize : '13px', width: '50px', lineHeight : '20px', textAlign : 'right', 'float' : 'left'}).appendTo(contain);
|
||||
td = new bkElement('td').setAttributes({className: 'h'}).appendTo(tr);
|
||||
new bkElement('label').setAttributes({htmlFor: itm}).setContent(field.txt).appendTo(td);
|
||||
}
|
||||
td = new bkElement('td').appendTo(tr);
|
||||
if(!field.txt) {
|
||||
td.setAttributes({colspan: 2});
|
||||
}
|
||||
|
||||
switch(type) {
|
||||
case 'text':
|
||||
this.inputs[itm] = new bkElement('input').setAttributes({id : itm, 'value' : val, 'type' : 'text'}).setStyle({margin : '2px 0', fontSize : '13px', 'float' : 'left', height : '20px', border : '1px solid #ccc', overflow : 'hidden'}).setStyle(field.style).appendTo(contain);
|
||||
this.inputs[itm] = new bkElement('input').setAttributes({id: itm, value: val, type: 'text'}).setStyle(field.style).appendTo(td);
|
||||
break;
|
||||
case 'select':
|
||||
this.inputs[itm] = new bkElement('select').setAttributes({id : itm}).setStyle({border : '1px solid #ccc', 'float' : 'left', margin : '2px 0'}).appendTo(contain);
|
||||
this.inputs[itm] = new bkElement('select').setAttributes({id: itm}).appendTo(td);
|
||||
for(opt in field.options) {
|
||||
var o = new bkElement('option').setAttributes({value : opt, selected : (opt == val) ? 'selected' : ''}).setContent(field.options[opt]).appendTo(this.inputs[itm]);
|
||||
var o = new bkElement('option').setAttributes({value: opt, selected: (opt == val) ? 'selected' : ''}).setContent(field.options[opt]).appendTo(this.inputs[itm]);
|
||||
}
|
||||
break;
|
||||
case 'content':
|
||||
this.inputs[itm] = new bkElement('textarea').setAttributes({id : itm}).setStyle({border : '1px solid #ccc', 'float' : 'left'}).setStyle(field.style).appendTo(contain);
|
||||
this.inputs[itm] = new bkElement('textarea').setAttributes({id: itm}).setStyle(field.style).appendTo(td);
|
||||
this.inputs[itm].value = val;
|
||||
break;
|
||||
case 'container':
|
||||
this.inputs[itm] = td;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
new bkElement('input').setAttributes({'type': 'submit', 'value': __('Submit')}).setStyle({backgroundColor : '#efefef',border : '1px solid #ccc', margin : '3px 0', 'float' : 'left', 'clear' : 'both'}).appendTo(this.form);
|
||||
new bkElement('input').setAttributes({type: 'submit', value: __('Submit'), className: 'button'}).appendTo(this.form);
|
||||
this.form.onsubmit = bkLib.cancelEvent;
|
||||
},
|
||||
|
||||
|
@ -1317,161 +1343,6 @@ var nicEditorBgColorButton = nicEditorColorButton.extend({
|
|||
|
||||
nicEditors.registerPlugin(nicPlugin,nicColorOptions);
|
||||
|
||||
/** nicImage */
|
||||
|
||||
/* START CONFIG */
|
||||
var nicImageOptions = {
|
||||
buttons : {
|
||||
'image' : {name : __('Add Image'), type : 'nicImageButton', tags : ['IMG']}
|
||||
}
|
||||
|
||||
};
|
||||
/* END CONFIG */
|
||||
|
||||
var nicImageButton = nicEditorAdvancedButton.extend({
|
||||
addPane : function() {
|
||||
this.im = this.ne.selectedInstance.selElm().parentTag('IMG');
|
||||
this.addForm({
|
||||
'' : {type : 'title', txt : __('Add/Edit Image')},
|
||||
'src' : {type : 'text', txt : 'URL', 'value' : 'http://', style : {width: '150px'}},
|
||||
'alt' : {type : 'text', txt : __('Alt Text'), style : {width: '100px'}},
|
||||
'align' : {type : 'select', txt : __('Align'), options : {none : __('Inline'),'left' : __('Left'), 'right' : __('Right')}}
|
||||
},this.im);
|
||||
},
|
||||
|
||||
submit : function(e) {
|
||||
var src = this.inputs['src'].value;
|
||||
if(src == "" || src == "http://") {
|
||||
alert(__("You must enter a Image URL to insert"));
|
||||
return false;
|
||||
}
|
||||
this.removePane();
|
||||
|
||||
if(!this.im) {
|
||||
var tmp = 'javascript:nicImTemp();';
|
||||
this.ne.nicCommand("insertImage",tmp);
|
||||
this.im = this.findElm('IMG','src',tmp);
|
||||
}
|
||||
if(this.im) {
|
||||
this.im.setAttributes({
|
||||
src : this.inputs['src'].value,
|
||||
alt : this.inputs['alt'].value,
|
||||
title : this.inputs['alt'].value,
|
||||
align : this.inputs['align'].value
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
nicEditors.registerPlugin(nicPlugin,nicImageOptions);
|
||||
|
||||
/** nicUpload */
|
||||
|
||||
/* START CONFIG */
|
||||
var nicUploadOptions = {
|
||||
buttons : {
|
||||
'upload' : {name : __('Upload Image'), type : 'nicUploadButton'}
|
||||
}
|
||||
|
||||
};
|
||||
/* END CONFIG */
|
||||
|
||||
var nicUploadButton = nicEditorAdvancedButton.extend({
|
||||
nicURI : 'http://api.imgur.com/2/upload.json',
|
||||
errorText : __('Failed to upload image'),
|
||||
|
||||
addPane : function() {
|
||||
if(typeof window.FormData === "undefined") {
|
||||
return this.onError(__("Image uploads are not supported in this browser, use Chrome, Firefox, or Safari instead."));
|
||||
}
|
||||
this.im = this.ne.selectedInstance.selElm().parentTag('IMG');
|
||||
|
||||
var container = new bkElement('div')
|
||||
.setStyle({ padding: '10px' })
|
||||
.appendTo(this.pane.pane);
|
||||
|
||||
new bkElement('div')
|
||||
.setStyle({ fontSize: '14px', fontWeight : 'bold', paddingBottom: '5px' })
|
||||
.setContent(__('Insert an Image'))
|
||||
.appendTo(container);
|
||||
|
||||
this.fileInput = new bkElement('input')
|
||||
.setAttributes({ 'type' : 'file' })
|
||||
.appendTo(container);
|
||||
|
||||
this.progress = new bkElement('progress')
|
||||
.setStyle({ width : '100%', display: 'none' })
|
||||
.setAttributes('max', 100)
|
||||
.appendTo(container);
|
||||
|
||||
this.fileInput.onchange = this.uploadFile.closure(this);
|
||||
},
|
||||
|
||||
onError : function(msg) {
|
||||
this.removePane();
|
||||
alert(msg || __("Failed to upload image"));
|
||||
},
|
||||
|
||||
uploadFile : function() {
|
||||
var file = this.fileInput.files[0];
|
||||
if (!file || !file.type.match(/image.*/)) {
|
||||
this.onError(__("Only image files can be uploaded"));
|
||||
return;
|
||||
}
|
||||
this.fileInput.setStyle({ display: 'none' });
|
||||
this.setProgress(0);
|
||||
|
||||
var fd = new FormData(); // https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
|
||||
fd.append("image", file);
|
||||
fd.append("key", "b7ea18a4ecbda8e92203fa4968d10660");
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", this.ne.options.uploadURI || this.nicURI);
|
||||
|
||||
xhr.onload = function() {
|
||||
try {
|
||||
var res = JSON.parse(xhr.responseText);
|
||||
} catch(e) {
|
||||
return this.onError();
|
||||
}
|
||||
this.onUploaded(res.upload);
|
||||
}.closure(this);
|
||||
xhr.onerror = this.onError.closure(this);
|
||||
xhr.upload.onprogress = function(e) {
|
||||
this.setProgress(e.loaded / e.total);
|
||||
}.closure(this);
|
||||
xhr.send(fd);
|
||||
},
|
||||
|
||||
setProgress : function(percent) {
|
||||
this.progress.setStyle({ display: 'block' });
|
||||
if(percent < .98) {
|
||||
this.progress.value = percent;
|
||||
} else {
|
||||
this.progress.removeAttribute('value');
|
||||
}
|
||||
},
|
||||
|
||||
onUploaded : function(options) {
|
||||
this.removePane();
|
||||
var src = options.links.original;
|
||||
if(!this.im) {
|
||||
this.ne.selectedInstance.restoreRng();
|
||||
var tmp = 'javascript:nicImTemp();';
|
||||
this.ne.nicCommand("insertImage", src);
|
||||
this.im = this.findElm('IMG','src', src);
|
||||
}
|
||||
var w = parseInt(this.ne.selectedInstance.elm.getStyle('width'));
|
||||
if(this.im) {
|
||||
this.im.setAttributes({
|
||||
src : src,
|
||||
width : (w && options.image.width) ? Math.min(w, options.image.width) : ''
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
nicEditors.registerPlugin(nicPlugin,nicUploadOptions);
|
||||
|
||||
/** nicXHTML */
|
||||
|
||||
var nicXHTML = bkClass.extend({
|
||||
|
|
|
@ -0,0 +1,154 @@
|
|||
/** nicImage */
|
||||
|
||||
/* START CONFIG */
|
||||
var nicImageOptions = {
|
||||
buttons : {
|
||||
'image' : {name : __('Add Image'), type : 'nicImageButton', tags : ['IMG']}
|
||||
}
|
||||
|
||||
};
|
||||
/* END CONFIG */
|
||||
|
||||
var nicImageButton = nicEditorAdvancedButton.extend({
|
||||
addPane : function() {
|
||||
this.im = this.ne.selectedInstance.selElm().parentTag('IMG');
|
||||
this.addForm({
|
||||
'' : {type : 'title', txt : __('Add/Edit Image')},
|
||||
'src' : {type : 'text', txt : __('URL'), 'value' : 'http://', style : {width: '150px'}},
|
||||
'alt' : {type : 'text', txt : __('Alt Text'), style : {width: '100px'}},
|
||||
'align' : {type : 'select', txt : __('Align'), options : {none : __('Inline'),'left' : __('Left'), 'right' : __('Right')}}
|
||||
},this.im);
|
||||
},
|
||||
|
||||
submit : function(e) {
|
||||
var src = this.inputs['src'].value;
|
||||
if(src == "" || src == "http://") {
|
||||
alert(__("You must enter a Image URL to insert"));
|
||||
return false;
|
||||
}
|
||||
this.removePane();
|
||||
|
||||
if(!this.im) {
|
||||
var tmp = 'javascript:nicImTemp();';
|
||||
this.ne.nicCommand("insertImage",tmp);
|
||||
this.im = this.findElm('IMG','src',tmp);
|
||||
}
|
||||
if(this.im) {
|
||||
this.im.setAttributes({
|
||||
src : this.inputs['src'].value,
|
||||
alt : this.inputs['alt'].value,
|
||||
title : this.inputs['alt'].value,
|
||||
align : this.inputs['align'].value
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
nicEditors.registerPlugin(nicPlugin,nicImageOptions);
|
||||
|
||||
/** nicUpload */
|
||||
|
||||
/* START CONFIG */
|
||||
var nicUploadOptions = {
|
||||
buttons : {
|
||||
'upload' : {name : __('Upload Image'), type : 'nicUploadButton'}
|
||||
}
|
||||
|
||||
};
|
||||
/* END CONFIG */
|
||||
|
||||
var nicUploadButton = nicEditorAdvancedButton.extend({
|
||||
nicURI : 'http://api.imgur.com/2/upload.json',
|
||||
errorText : __('Failed to upload image'),
|
||||
|
||||
addPane : function() {
|
||||
if(typeof window.FormData === "undefined") {
|
||||
return this.onError(__("Image uploads are not supported in this browser, use Chrome, Firefox, or Safari instead."));
|
||||
}
|
||||
this.im = this.ne.selectedInstance.selElm().parentTag('IMG');
|
||||
|
||||
var container = new bkElement('div')
|
||||
.setStyle({ padding: '10px' })
|
||||
.appendTo(this.pane.pane);
|
||||
|
||||
new bkElement('div')
|
||||
.setStyle({ fontSize: '14px', fontWeight : 'bold', paddingBottom: '5px' })
|
||||
.setContent(__('Insert an Image'))
|
||||
.appendTo(container);
|
||||
|
||||
this.fileInput = new bkElement('input')
|
||||
.setAttributes({ 'type' : 'file' })
|
||||
.appendTo(container);
|
||||
|
||||
this.progress = new bkElement('progress')
|
||||
.setStyle({ width : '100%', display: 'none' })
|
||||
.setAttributes('max', 100)
|
||||
.appendTo(container);
|
||||
|
||||
this.fileInput.onchange = this.uploadFile.closure(this);
|
||||
},
|
||||
|
||||
onError : function(msg) {
|
||||
this.removePane();
|
||||
alert(msg || __("Failed to upload image"));
|
||||
},
|
||||
|
||||
uploadFile : function() {
|
||||
var file = this.fileInput.files[0];
|
||||
if (!file || !file.type.match(/image.*/)) {
|
||||
this.onError(__("Only image files can be uploaded"));
|
||||
return;
|
||||
}
|
||||
this.fileInput.setStyle({ display: 'none' });
|
||||
this.setProgress(0);
|
||||
|
||||
var fd = new FormData(); // https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
|
||||
fd.append("image", file);
|
||||
fd.append("key", "b7ea18a4ecbda8e92203fa4968d10660");
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", this.ne.options.uploadURI || this.nicURI);
|
||||
|
||||
xhr.onload = function() {
|
||||
try {
|
||||
var res = JSON.parse(xhr.responseText);
|
||||
} catch(e) {
|
||||
return this.onError();
|
||||
}
|
||||
this.onUploaded(res.upload);
|
||||
}.closure(this);
|
||||
xhr.onerror = this.onError.closure(this);
|
||||
xhr.upload.onprogress = function(e) {
|
||||
this.setProgress(e.loaded / e.total);
|
||||
}.closure(this);
|
||||
xhr.send(fd);
|
||||
},
|
||||
|
||||
setProgress : function(percent) {
|
||||
this.progress.setStyle({ display: 'block' });
|
||||
if(percent < .98) {
|
||||
this.progress.value = percent;
|
||||
} else {
|
||||
this.progress.removeAttribute('value');
|
||||
}
|
||||
},
|
||||
|
||||
onUploaded : function(options) {
|
||||
this.removePane();
|
||||
var src = options.links.original;
|
||||
if(!this.im) {
|
||||
this.ne.selectedInstance.restoreRng();
|
||||
var tmp = 'javascript:nicImTemp();';
|
||||
this.ne.nicCommand("insertImage", src);
|
||||
this.im = this.findElm('IMG','src', src);
|
||||
}
|
||||
var w = parseInt(this.ne.selectedInstance.elm.getStyle('width'));
|
||||
if(this.im) {
|
||||
this.im.setAttributes({
|
||||
src : src,
|
||||
width : (w && options.image.width) ? Math.min(w, options.image.width) : ''
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
nicEditors.registerPlugin(nicPlugin,nicUploadOptions);
|
|
@ -0,0 +1,242 @@
|
|||
/** nicImageGT */
|
||||
|
||||
/* START CONFIG */
|
||||
var nicImageOptions = {
|
||||
buttons: {
|
||||
'image': {name: __('Add Image'), type: 'nicImageButton', tags: ['IMG']}
|
||||
}
|
||||
|
||||
};
|
||||
/* END CONFIG */
|
||||
|
||||
var nicImageButton = nicEditorAdvancedButton.extend({
|
||||
addPane: function() {
|
||||
this.im = this.ne.selectedInstance.selElm().parentTag('IMG');
|
||||
var params = this.parseParams(this.im);
|
||||
|
||||
this.addForm({
|
||||
'': {type: 'title', txt: __('Add/Edit Image')},
|
||||
'src': {type: 'text', txt: __('URL or Name'), style: {width: '150px'}},
|
||||
'href': {type: 'text', txt: __('Hyperlink'), style: {width: '150px'}},
|
||||
'size': {type: 'container', txt: __('Max Size')},
|
||||
'align': {type: 'select', txt: __('Align'), options: {none: __('Inline'), left: __('Left'), right: __('Right')}},
|
||||
}, params);
|
||||
|
||||
this.hinter = new SimpleAutocomplete(this.inputs['src'], this.gtLoadData.closure(this), null, null, null, false, true);
|
||||
|
||||
var s = this.inputs['href'].parentNode;
|
||||
new bkElement('br').appendTo(s);
|
||||
this.inputs['newwindow'] = new bkElement('input').setAttributes({type: 'checkbox', id: 'newwindow', checked: 1 && params.newwindow}).appendTo(s);
|
||||
new bkElement('label').setAttributes({htmlFor: 'newwindow'}).setContent(__('Open in new window')).appendTo(s);
|
||||
|
||||
s = this.inputs['size'];
|
||||
this.inputs['width'] = new bkElement('input').setAttributes({type: 'text', size: 5, value: params.width||''}).appendTo(s);
|
||||
s.appendChild(document.createTextNode(' x '));
|
||||
this.inputs['height'] = new bkElement('input').setAttributes({type: 'text', size: 5, value: params.height||''}).appendTo(s);
|
||||
},
|
||||
|
||||
parseParams: function(elm) {
|
||||
var r = { getAttribute: function(n) { return this[n]; } };
|
||||
if (!elm) return r;
|
||||
if (elm.parentNode.nodeName == 'A') {
|
||||
r.href = elm.parentNode.href;
|
||||
if (elm.parentNode.target == '_blank') {
|
||||
r.newwindow = true;
|
||||
}
|
||||
}
|
||||
r.align = elm.align;
|
||||
if (elm.src.substr(0, GT.domain.length+10) == GT.domain+'/file.php?') {
|
||||
var id, p, m = elm.src.substr(GT.domain.length+10).split('&');
|
||||
for (var i = 0; i < m.length; i++) {
|
||||
p = m[i].split('=', 2);
|
||||
if (p[0] == 'id') {
|
||||
id = p[1];
|
||||
} else if (p[0] == 'w') {
|
||||
r.width = p[1];
|
||||
} else if (p[0] == 'h') {
|
||||
r.height = p[1];
|
||||
}
|
||||
}
|
||||
r.src = '#'+id+' - '+elm.title;
|
||||
} else {
|
||||
r.src = elm.src;
|
||||
r.width = elm.style.maxWidth.replace('px', '');
|
||||
r.height = elm.style.maxHeight.replace('px', '');
|
||||
}
|
||||
return r;
|
||||
},
|
||||
|
||||
removePane: function() {
|
||||
if (this.hinter) {
|
||||
this.hinter.remove();
|
||||
this.hinter = null;
|
||||
}
|
||||
nicEditorAdvancedButton.prototype.removePane.apply(this);
|
||||
},
|
||||
|
||||
gtLoadData: function(hint, value) {
|
||||
POST(GT.domain+'/api.php?action=listimgs&format=json', {value: value}, function(r){
|
||||
try { hint.replaceItems(JSON.parse(r.responseText)); }
|
||||
catch(e) {}
|
||||
});
|
||||
},
|
||||
|
||||
submit: function(e) {
|
||||
var src = this.inputs['src'].value;
|
||||
var gtId = /^#(\d+)(\s*-\s*)?(.*)/.exec(src);
|
||||
var alt = '';
|
||||
var style = {};
|
||||
var w = this.inputs['width'].value;
|
||||
var h = this.inputs['height'].value;
|
||||
if (!/^[1-9]\d*$/.exec(w)) w = '';
|
||||
if (!/^[1-9]\d*$/.exec(h)) h = '';
|
||||
if (gtId && gtId[1]) {
|
||||
alt = gtId[3];
|
||||
src = GT.domain+'/file.php?action=thumb&id='+gtId[1]+'&w='+w+'&h='+h;
|
||||
} else if (/^https?:\/\/./.exec(src)) {
|
||||
if (w) style.maxWidth = w+'px';
|
||||
if (h) style.maxHeight = h+'px';
|
||||
} else {
|
||||
alert(__('To insert an image you must select uploaded file ID or enter the image URL!'));
|
||||
return false;
|
||||
}
|
||||
this.removePane();
|
||||
|
||||
if (!this.im) {
|
||||
var tmp = 'javascript:nicImTemp();';
|
||||
this.ne.nicCommand("insertImage",tmp);
|
||||
this.im = this.findElm('IMG','src',tmp);
|
||||
}
|
||||
if (this.im) {
|
||||
var href = this.inputs['href'].value;
|
||||
var p = this.im.parentNode;
|
||||
if (p.nodeName != 'A' && href) {
|
||||
var tmp = 'javascript:nicTemp();';
|
||||
this.ne.nicCommand("createlink",tmp);
|
||||
p = this.findElm('A','href',tmp);
|
||||
}
|
||||
if (p.nodeName == 'A') {
|
||||
if (href) {
|
||||
p.setAttributes({href: href, target: this.inputs['newwindow'].checked ? '_blank' : ''});
|
||||
} else {
|
||||
p.parentNode.appendChild(this.im);
|
||||
p.removeChild(parentNode);
|
||||
}
|
||||
}
|
||||
this.im.setStyle(style).setAttributes({
|
||||
src: src,
|
||||
alt: alt,
|
||||
title: alt,
|
||||
align: this.inputs['align'].value
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
nicEditors.registerPlugin(nicPlugin,nicImageOptions);
|
||||
|
||||
/** nicUploadGT */
|
||||
|
||||
/* START CONFIG */
|
||||
var nicUploadOptions = {
|
||||
buttons: {
|
||||
'upload': {name: __('Upload Image'), type: 'nicUploadButton'}
|
||||
}
|
||||
|
||||
};
|
||||
/* END CONFIG */
|
||||
|
||||
var nicUploadButton = nicEditorAdvancedButton.extend({
|
||||
errorText: __('Failed to upload image'),
|
||||
|
||||
addPane: function() {
|
||||
if(typeof window.FormData === "undefined") {
|
||||
return this.onError(__("Image uploads are not supported in this browser, use Chrome, Firefox, or Safari instead."));
|
||||
}
|
||||
this.im = this.ne.selectedInstance.selElm().parentTag('IMG');
|
||||
|
||||
var container = new bkElement('div')
|
||||
.setStyle({ padding: '10px' })
|
||||
.appendTo(this.pane.pane);
|
||||
|
||||
new bkElement('div')
|
||||
.setStyle({ fontSize: '14px', fontWeight: 'bold', paddingBottom: '5px' })
|
||||
.setContent(__('Insert an Image'))
|
||||
.appendTo(container);
|
||||
|
||||
this.fileInput = new bkElement('input')
|
||||
.setAttributes({ type: 'file' })
|
||||
.appendTo(container);
|
||||
|
||||
this.progress = new bkElement('progress')
|
||||
.setStyle({ width: '100%', display: 'none' })
|
||||
.setAttributes('max', 100)
|
||||
.appendTo(container);
|
||||
|
||||
this.fileInput.onchange = this.uploadFile.closure(this);
|
||||
},
|
||||
|
||||
onError: function(msg) {
|
||||
this.removePane();
|
||||
alert(msg || __("Failed to upload image"));
|
||||
},
|
||||
|
||||
uploadFile: function() {
|
||||
var file = this.fileInput.files[0];
|
||||
if (!file || !file.type.match(/image.*/)) {
|
||||
this.onError(__("Only image files can be uploaded"));
|
||||
return;
|
||||
}
|
||||
this.fileInput.setStyle({ display: 'none' });
|
||||
this.setProgress(0);
|
||||
|
||||
var fd = new FormData(); // https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
|
||||
fd.append("image", file);
|
||||
fd.append("key", "b7ea18a4ecbda8e92203fa4968d10660");
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", this.ne.options.uploadURI || this.nicURI);
|
||||
|
||||
xhr.onload = function() {
|
||||
try {
|
||||
var res = JSON.parse(xhr.responseText);
|
||||
} catch(e) {
|
||||
return this.onError();
|
||||
}
|
||||
this.onUploaded(res.upload);
|
||||
}.closure(this);
|
||||
xhr.onerror = this.onError.closure(this);
|
||||
xhr.upload.onprogress = function(e) {
|
||||
this.setProgress(e.loaded / e.total);
|
||||
}.closure(this);
|
||||
xhr.send(fd);
|
||||
},
|
||||
|
||||
setProgress: function(percent) {
|
||||
this.progress.setStyle({ display: 'block' });
|
||||
if(percent < .98) {
|
||||
this.progress.value = percent;
|
||||
} else {
|
||||
this.progress.removeAttribute('value');
|
||||
}
|
||||
},
|
||||
|
||||
onUploaded: function(options) {
|
||||
this.removePane();
|
||||
var src = options.links.original;
|
||||
if(!this.im) {
|
||||
this.ne.selectedInstance.restoreRng();
|
||||
var tmp = 'javascript:nicImTemp();';
|
||||
this.ne.nicCommand("insertImage", src);
|
||||
this.im = this.findElm('IMG','src', src);
|
||||
}
|
||||
var w = parseInt(this.ne.selectedInstance.elm.getStyle('width'));
|
||||
if(this.im) {
|
||||
this.im.setAttributes({
|
||||
src: src,
|
||||
width: (w && options.image.width) ? Math.min(w, options.image.width) : ''
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
nicEditors.registerPlugin(nicPlugin,nicUploadOptions);
|
8
nicRu.js
8
nicRu.js
|
@ -52,7 +52,7 @@ var nicRu = {
|
|||
'Add Link': 'Вставить ссылку',
|
||||
'Remove Link': 'Убрать ссылку',
|
||||
'Add/Edit Link': 'Ссылка',
|
||||
'Hint': 'Хинт',
|
||||
'Hint': 'Подсказка',
|
||||
'Open In': 'Открыть',
|
||||
'Current Window': 'В этом окне',
|
||||
'New Window': 'В новом окне',
|
||||
|
@ -68,6 +68,12 @@ var nicRu = {
|
|||
'Insert an Image': 'Вставить картинку',
|
||||
'You must enter a Image URL to insert': 'Чтобы вставить картинку, введите её URL',
|
||||
|
||||
'URL or Name': 'URL или имя',
|
||||
'Hyperlink': 'Ссылка',
|
||||
'Open in new window': 'Открывать в новом окне',
|
||||
'Max Size': 'Макс. размер',
|
||||
'To insert an image you must select uploaded file ID or enter the image URL!': 'Чтобы вставить картинку, либо выберите её из выпадающего списка (работают подсказки по названию), либо введите её прямой URL!',
|
||||
|
||||
'Upload Image': 'Загрузить картинку',
|
||||
'Failed to upload image': 'Ошибка загрузки картинки',
|
||||
'Only image files can be uploaded': 'Так загружать можно только картинки',
|
||||
|
|
Loading…
Reference in New Issue