180 lines
5.6 KiB
JavaScript
Executable File
180 lines
5.6 KiB
JavaScript
Executable File
/*
|
|
* ImageResize Plugin for CKEditor (http://github.com/nmmf/imageresize)
|
|
* Created by ALL-INKL.COM - Neue Medien Münnich - 18. Feb 2014
|
|
* Licensed under the terms of GPL, LGPL and MPL licenses.
|
|
*/
|
|
CKEDITOR.plugins.add("imageresize", {
|
|
init : function(editor){
|
|
|
|
/* Browser Support */
|
|
if(!this.support()) return;
|
|
|
|
/* Config */
|
|
this.getConfig();
|
|
|
|
/* Resize images on paste */
|
|
var t = this;
|
|
editor.on("instanceReady", function(){
|
|
editor.document.on("paste", function(e){
|
|
var parent = e.data.getTarget();
|
|
if(!parent) parent = editor.document;
|
|
window.setTimeout(function(){ t.resizeAll(editor, parent); }, 500);
|
|
window.setTimeout(function(){ t.resizeAll(editor, parent); }, 1000);
|
|
window.setTimeout(function(){ t.resizeAll(editor, parent); }, 1500);
|
|
});
|
|
editor.document.on("drop", function(e){
|
|
var parent = e.data.getTarget();
|
|
if(!parent) parent = editor.document;
|
|
window.setTimeout(function(){ t.resizeAll(editor, parent); }, 500);
|
|
window.setTimeout(function(){ t.resizeAll(editor, parent); }, 1000);
|
|
window.setTimeout(function(){ t.resizeAll(editor, parent); }, 1500);
|
|
});
|
|
});
|
|
},
|
|
|
|
/*
|
|
* Resize all images in a node
|
|
* editor: CKEDITOR Instance
|
|
* parent: parent node
|
|
* width: (integer) max width of the image
|
|
* height: (integer) max height of the image
|
|
*/
|
|
resizeAll : function(editor, parent, width, height){
|
|
|
|
/* Browser Support */
|
|
if(!this.support()) return;
|
|
|
|
/* Parent Node */
|
|
if(!parent) parent = editor.document;
|
|
if(!parent) return;
|
|
|
|
/* Width and Height */
|
|
if(!width) width = this.config.maxWidth;
|
|
if(!height) height = this.config.maxHeight;
|
|
console.log(width+"x"+height);
|
|
|
|
/* Parent Node is a CKEditor DOM Node */
|
|
if("find" in parent && typeof(parent.find) == "function") {} else parent = new CKEDITOR.dom.node(parent);
|
|
|
|
/* Find images and resize */
|
|
if(parent && "find" in parent && typeof(parent.find) == "function") {
|
|
var img = parent.find("img"), w, h, s, item, index;
|
|
var l = img.count();
|
|
for(index = 0; index < l; index++) {
|
|
item = img.getItem(index), w = 0, h = 0, s = "";
|
|
try { w = item.$.width, h = item.$.height, s = item.getAttribute("src"); } catch(e) { w = 0, h = 0, s = ""; }
|
|
if(s && s.indexOf("data:") === 0 && (w > width || h > height)) this.resize(editor, item, width, height);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
/*
|
|
* Resize one image
|
|
* editor: CKEDITOR Instance
|
|
* imageElement: Image Node
|
|
* width: (integer) max width of the image
|
|
* height: (integer) max height of the image
|
|
*/
|
|
resize : function(editor, imageElement, width, height){
|
|
|
|
/* Browser Support */
|
|
if(!this.support() || !imageElement) return;
|
|
|
|
/* Width and Height */
|
|
if(!width) width = this.config.maxWidth;
|
|
if(!height) height = this.config.maxHeight;
|
|
console.log(width+"x"+height);
|
|
|
|
/* Create image and set properties */
|
|
var img = new Image(), ns = "ckeditorimageresize";
|
|
img[ns] = {"n":imageElement, "w":width, "h":height};
|
|
|
|
/* Error Function */
|
|
img.onerror = function() { this[ns] = null; delete this[ns]; };
|
|
img.onabort = function() { this[ns] = null; delete this[ns]; };
|
|
|
|
/* Resize function when image is loaded */
|
|
img.onload = function() {
|
|
|
|
/* calculate width and height */
|
|
if(this.width <= this[ns].w && this.height <= this[ns].h) return;
|
|
if((this[ns].w / this[ns].h) > (this.width / this.height)) this[ns].w = this[ns].h * (this.width / this.height);
|
|
else this[ns].h = Math.round(this[ns].w / (this.width / this.height));
|
|
|
|
/* Create canvas and draw image with new width and height */
|
|
var cv = document.createElement("canvas");
|
|
cv.width = this[ns].w;
|
|
cv.height = this[ns].h;
|
|
cv.style.width = this[ns].w+"px";
|
|
cv.style.height = this[ns].h+"px";
|
|
var ct = cv.getContext("2d");
|
|
ct.drawImage(this, 0, 0, this[ns].w, this[ns].h);
|
|
|
|
/* Get base64 image source and update image node */
|
|
if(this[ns].n) {
|
|
if(/^data:image\/jpeg/i.test(this.src) || /\.(jpg|jpeg)$/i.test(this.src)) {
|
|
this[ns].n.setAttribute("src", cv.toDataURL("image/jpeg", 0.8));
|
|
} else {
|
|
this[ns].n.setAttribute("src", cv.toDataURL("image/png"));
|
|
}
|
|
this[ns].n.setAttribute("width", this[ns].w);
|
|
this[ns].n.setAttribute("height", this[ns].h);
|
|
try {
|
|
this[ns].n.$.style.width = this[ns].w+"px";
|
|
this[ns].n.$.style.height = this[ns].h+"px";
|
|
} catch(e) {}
|
|
try {
|
|
editor.focus();
|
|
editor.getSelection().scrollIntoView();
|
|
} catch(e) {}
|
|
}
|
|
|
|
this[ns] = cv = ct = null;
|
|
delete this[ns];
|
|
};
|
|
|
|
/* Load image */
|
|
img.src = imageElement.getAttribute("src");
|
|
|
|
},
|
|
|
|
/* Browser Support */
|
|
supportResult : null,
|
|
support : function(){
|
|
if(this.supportResult === null) {
|
|
this.supportResult = false;
|
|
var cv = document.createElement("canvas");
|
|
if(cv && cv.getContext && cv.toDataURL && cv.getContext("2d")) {
|
|
var ct = cv.getContext("2d");
|
|
if(ct && ct.getImageData && ct.putImageData) this.supportResult = true;
|
|
ct = null;
|
|
}
|
|
cv = null;
|
|
}
|
|
return this.supportResult;
|
|
},
|
|
|
|
/* Config */
|
|
config : {
|
|
"maxWidth" : 800
|
|
,"maxHeight" : 800
|
|
},
|
|
getConfig : function(){
|
|
if(CKEDITOR.config.imageResize)
|
|
{
|
|
for(var k in this.config)
|
|
{
|
|
if(CKEDITOR.config.imageResize[k])
|
|
{
|
|
this.config[k] = parseInt(CKEDITOR.config.imageResize[k], 10);
|
|
if(isNaN(this.config[k]) || this.config[k] < 1)
|
|
{
|
|
this.config[k] = 800;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}); |