GT wiki-like image inserting for nicEdit

master
vitalif 2012-10-13 23:22:41 +00:00 committed by Vitaliy Filippov
parent 5fa03aebf9
commit e223cf90e8
4 changed files with 442 additions and 169 deletions

View File

@ -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({

154
nicImageUpload.js Normal file
View File

@ -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);

242
nicImageUploadGT.js Normal file
View File

@ -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);

View File

@ -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': 'Так загружать можно только картинки',