ckeditor-image-to-base
Version:
ckeditor-image-to-base64 plugin for CKEditor 4 - Adds images from local as base64 string into the source without server side processing.
516 lines (486 loc) • 15.6 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-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
}
]
}
]
}
]
};
});