ckeditor-image-to-base-mga
Version:
ckeditor-image-to-base64 plugin for CKEditor 4 - Adds images from local as base64 string into the source without server side processing. Also works when pasting an image copied from Word
484 lines (454 loc) • 13.3 kB
JavaScript
/* {[The file is published on the basis of YetiForce Public License 3.0 that can be found in the following directory: licenses/LicenseEN.txt or yetiforce.com]} */
CKEDITOR.dialog.add("ckeditor-image-to-base-mga-dialog", function (editor) {
var t = null,
selectedImg = null,
orgWidth = null,
orgHeight = null,
imgPreview = null,
imgScal = 1,
lock = true;
/* Check File Reader Support */
function fileSupport() {
var r = false,
n = null;
try {
if (FileReader) {
var n = document.createElement("input");
if (n && "files" in n) r = true;
}
} catch (e) {
r = false;
}
n = null;
return r;
}
var isFReaderSupported = fileSupport();
/* Load preview image */
function imagePreviewLoad(s) {
/* no preview */
if (typeof s != "string" || !s) {
imgPreview.getElement().setHtml("");
return;
}
/* Create image */
var i = new Image();
/* Display loading text in preview element */
imgPreview.getElement().setHtml("Loading...");
/* When image is loaded */
i.onload = function () {
/* Remove preview */
imgPreview.getElement().setHtml("");
/* Set attributes */
if (orgWidth == null || orgHeight == null) {
t.setValueOf("tab-properties", "width", this.width);
t.setValueOf("tab-properties", "height", this.height);
imgScal = 1;
if (this.height > 0 && this.width > 0) imgScal = this.width / this.height;
if (imgScal <= 0) imgScal = 1;
} else {
orgWidth = null;
orgHeight = null;
}
this.id = editor.id + "previewimage";
this.setAttribute("style", "max-width:400px;max-height:100px;");
this.setAttribute("alt", "");
/* Insert preview image */
try {
var p = imgPreview.getElement().$;
if (p) p.appendChild(this);
} catch (e) {}
};
/* Error Function */
i.onerror = function () {
imgPreview.getElement().setHtml("");
};
i.onabort = function () {
imgPreview.getElement().setHtml("");
};
/* Load image */
i.src = s;
}
function imagePreview(src) {
imgPreview.getElement().setHtml("");
if (isFReaderSupported) {
var fileI = t.getContentElement("tab-source", "file");
var n = null;
try {
n = fileI.getInputElement().$;
} catch (e) {
n = null;
}
if (n && "files" in n && n.files && n.files.length > 0 && n.files[0]) {
if ("type" in n.files[0] && !n.files[0].type.match("image.*")) return;
if (!FileReader) return;
imgPreview.getElement().setHtml("Loading...");
var fr = new FileReader();
fr.onload = (function (f) {
return function (e) {
imgPreview.getElement().setHtml("");
imagePreviewLoad(e.target.result);
};
})(n.files[0]);
fr.onerror = function () {
imgPreview.getElement().setHtml("");
};
fr.onabort = function () {
imgPreview.getElement().setHtml("");
};
fr.readAsDataURL(n.files[0]);
}
}
}
function getImageDimensions() {
var o = {
w: t.getContentElement("tab-properties", "width").getValue(),
h: t.getContentElement("tab-properties", "height").getValue(),
uw: "px",
uh: "px",
};
if (o.w.indexOf("%") >= 0) o.uw = "%";
if (o.h.indexOf("%") >= 0) o.uh = "%";
o.w = parseInt(o.w, 10);
o.h = parseInt(o.h, 10);
if (isNaN(o.w)) o.w = 0;
if (isNaN(o.h)) o.h = 0;
return o;
}
function imageDimensions(src) {
var o = getImageDimensions();
var u = "px";
if (src == "width") {
if (o.uw == "%") u = "%";
o.h = Math.round(o.w / imgScal);
} else {
if (o.uh == "%") u = "%";
o.w = Math.round(o.h * imgScal);
}
if (u == "%") {
o.w += "%";
o.h += "%";
}
t.getContentElement("tab-properties", "width").setValue(o.w),
t.getContentElement("tab-properties", "height").setValue(o.h);
}
function integerValue(elem) {
var v = elem.getValue(),
u = "";
if (v.indexOf("%") >= 0) u = "%";
v = parseInt(v, 10);
if (isNaN(v)) v = 0;
elem.setValue(v + u);
}
if (isFReaderSupported) {
var sourceElements = [
{
type: "hbox",
widths: ["70px"],
style: "margin-top:40px;",
children: [
{
type: "file",
id: "file",
label: "",
onChange: function () {
imagePreview("file");
},
},
],
},
{
type: "html",
id: "preview",
html: new CKEDITOR.template('<div style="text-align:center;"></div>').output(),
},
];
}
/* Dialog */
return {
title: editor.lang.common.image,
minWidth: 450,
minHeight: 180,
onLoad: function () {
/* Get image preview element */
imgPreview = this.getContentElement("tab-source", "preview");
/* Constrain proportions or not */
this.getContentElement("tab-properties", "lock")
.getInputElement()
.on(
"click",
function () {
if (this.getValue()) lock = true;
else lock = false;
if (lock) imageDimensions("width");
},
this.getContentElement("tab-properties", "lock")
);
/* Change Attributes Events */
this.getContentElement("tab-properties", "width")
.getInputElement()
.on("keyup", function () {
if (lock) imageDimensions("width");
});
this.getContentElement("tab-properties", "height")
.getInputElement()
.on("keyup", function () {
if (lock) imageDimensions("height");
});
this.getContentElement("tab-properties", "vmargin")
.getInputElement()
.on(
"keyup",
function () {
integerValue(this);
},
this.getContentElement("tab-properties", "vmargin")
);
this.getContentElement("tab-properties", "hmargin")
.getInputElement()
.on(
"keyup",
function () {
integerValue(this);
},
this.getContentElement("tab-properties", "hmargin")
);
this.getContentElement("tab-properties", "border")
.getInputElement()
.on(
"keyup",
function () {
integerValue(this);
},
this.getContentElement("tab-properties", "border")
);
},
onShow: function () {
/* Remove preview */
imgPreview.getElement().setHtml("");
(t = this), (orgWidth = null), (orgHeight = null), (imgScal = 1), (lock = true);
/* selected image or null */
selectedImg = editor.getSelection();
if (selectedImg) selectedImg = selectedImg.getSelectedElement();
if (!selectedImg || selectedImg.getName() !== "img") selectedImg = null;
/* Set input values */
t.setValueOf("tab-properties", "lock", lock);
t.setValueOf("tab-properties", "vmargin", "0");
t.setValueOf("tab-properties", "hmargin", "0");
t.setValueOf("tab-properties", "border", "0");
t.setValueOf("tab-properties", "align", "none");
if (selectedImg) {
/* Set input values from selected image */
if (typeof selectedImg.getAttribute("width") == "string")
orgWidth = selectedImg.getAttribute("width");
if (typeof selectedImg.getAttribute("height") == "string")
orgHeight = selectedImg.getAttribute("height");
if ((orgWidth == null || orgHeight == null) && selectedImg.$) {
orgWidth = selectedImg.$.width;
orgHeight = selectedImg.$.height;
}
if (orgWidth != null && orgHeight != null) {
t.setValueOf("tab-properties", "width", orgWidth);
t.setValueOf("tab-properties", "height", orgHeight);
orgWidth = parseInt(orgWidth, 10);
orgHeight = parseInt(orgHeight, 10);
imgScal = 1;
if (!isNaN(orgWidth) && !isNaN(orgHeight) && orgHeight > 0 && orgWidth > 0)
imgScal = orgWidth / orgHeight;
if (imgScal <= 0) imgScal = 1;
}
if (typeof selectedImg.getAttribute("src") == "string") {
if (selectedImg.getAttribute("src").indexOf("data:") === 0) {
imagePreview("base64");
imagePreviewLoad(selectedImg.getAttribute("src"));
}
}
if (typeof selectedImg.getAttribute("alt") == "string")
t.setValueOf("tab-properties", "alt", selectedImg.getAttribute("alt"));
if (typeof selectedImg.getAttribute("hspace") == "string")
t.setValueOf("tab-properties", "hmargin", selectedImg.getAttribute("hspace"));
if (typeof selectedImg.getAttribute("vspace") == "string")
t.setValueOf("tab-properties", "vmargin", selectedImg.getAttribute("vspace"));
if (typeof selectedImg.getAttribute("border") == "string")
t.setValueOf("tab-properties", "border", selectedImg.getAttribute("border"));
if (typeof selectedImg.getAttribute("align") == "string") {
switch (selectedImg.getAttribute("align")) {
case "top":
case "text-top":
t.setValueOf("tab-properties", "align", "top");
break;
case "baseline":
case "bottom":
case "text-bottom":
t.setValueOf("tab-properties", "align", "bottom");
break;
case "left":
t.setValueOf("tab-properties", "align", "left");
break;
case "right":
t.setValueOf("tab-properties", "align", "right");
break;
}
}
t.selectPage("tab-properties");
}
},
onOk: function () {
/* Get image source */
var src = "";
try {
src = CKEDITOR.document.getById(editor.id + "previewimage").$.src;
} catch (e) {
src = "";
}
if (typeof src != "string" || src == null || src === "") return;
/* selected image or new image */
if (selectedImg) var newImg = selectedImg;
else var newImg = editor.document.createElement("img");
newImg.setAttribute("src", src);
src = null;
/* Set attributes */
newImg.setAttribute(
"alt",
t.getValueOf("tab-properties", "alt").replace(/^\s+/, "").replace(/\s+$/, "")
);
var attr = {
width: ["width", "width:#;", "integer", 1],
height: ["height", "height:#;", "integer", 1],
vmargin: ["vspace", "margin-top:#;margin-bottom:#;", "integer", 0],
hmargin: ["hspace", "margin-left:#;margin-right:#;", "integer", 0],
align: ["align", ""],
border: ["border", "border:# solid black;", "integer", 0],
},
css = [],
value,
cssvalue,
attrvalue,
k;
for (k in attr) {
value = t.getValueOf("tab-properties", k);
attrvalue = value;
cssvalue = value;
unit = "px";
if (k == "align") {
switch (value) {
case "top":
case "bottom":
attr[k][1] = "vertical-align:#;";
break;
case "left":
case "right":
attr[k][1] = "float:#;";
break;
default:
value = null;
break;
}
}
if (attr[k][2] == "integer") {
if (value.indexOf("%") >= 0) unit = "%";
value = parseInt(value, 10);
if (isNaN(value)) value = null;
else if (value < attr[k][3]) value = null;
if (value != null) {
if (unit == "%") {
attrvalue = value + "%";
cssvalue = value + "%";
} else {
attrvalue = value;
cssvalue = value + "px";
}
}
}
if (value != null) {
newImg.setAttribute(attr[k][0], attrvalue);
css.push(attr[k][1].replace(/#/g, cssvalue));
}
}
if (css.length > 0) newImg.setAttribute("style", css.join(""));
/* Insert new image */
if (!selectedImg) editor.insertElement(newImg);
/* Resize image */
if (editor.plugins.imageresize) editor.plugins.imageresize.resize(editor, newImg, 800, 800);
},
/* Dialog form */
contents: [
{
id: "tab-source",
label: editor.lang.common.generalTab,
elements: sourceElements,
},
{
id: "tab-properties",
label: editor.lang.common.advancedTab,
elements: [
{
type: "text",
id: "alt",
label: editor.lang.image.alt,
},
{
type: "hbox",
widths: ["15%", "15%", "70%"],
children: [
{
type: "text",
width: "45px",
id: "width",
label: editor.lang.common.width,
},
{
type: "text",
width: "45px",
id: "height",
label: editor.lang.common.height,
},
{
type: "checkbox",
id: "lock",
label: editor.lang.image.lockRatio,
style: "margin-top:18px;",
},
],
},
{
type: "hbox",
widths: ["23%", "30%", "30%", "17%"],
style: "margin-top:10px;",
children: [
{
type: "select",
id: "align",
label: editor.lang.common.align,
items: [
[editor.lang.common.notSet, "none"],
[editor.lang.common.alignTop, "top"],
[editor.lang.common.alignBottom, "bottom"],
[editor.lang.common.alignLeft, "left"],
[editor.lang.common.alignRight, "right"],
],
},
{
type: "text",
width: "45px",
id: "vmargin",
label: editor.lang.image.vSpace,
},
{
type: "text",
width: "45px",
id: "hmargin",
label: editor.lang.image.hSpace,
},
{
type: "text",
width: "45px",
id: "border",
label: editor.lang.image.border,
},
],
},
],
},
],
};
});