- February 8, 2017
- Posted by: iSummation Team
- Category: Uncategorized
I am mostly uses Firefox browser for any developing stuff and I am facing an issue with CKEditor.
CKEditor allows you to direct copy & paste or drag & drop image into CKEditor body area using Firefox browser and it will embed image as base 64 encoded image into the CKEditor body. When you see the actual source code of paste image, it will look like below:
[code:html]<img alt="" src="data:image/jpeg;base64,/9j/4QZJgABAgEYAgA/7gA…….9g+3iXJ//Z" />[/code]
And this will create an issue for me when I am saving record, its give me a database field (column) length error. Because this pasted image will be converted into base 64 encode format and this string length is too much long.
For that, I have added a simple custom JavaScript plug-in ‘blockimagepaste’ into CKEditor, that will restrict user to direct paste or drag & drop image on CKEditor body.
Source code of ‘blockimagepaste’ plug-in look like below:
[code:javascript]CKEDITOR.plugins.add( ‘blockimagepaste’,
{
init : function( editor )
{
function replaceImgText(html) {
var ret = html.replace( /<img[^>]*src="data:image\/(bmp|dds|gif|jpg|jpeg|png|psd|pspimage|tga|thm|tif|tiff|yuv|ai|eps|ps|svg);base64,.*?"[^>]*>/gi, function( img ){
alert("Direct image paste is not allowed.");
return ”;
});
return ret;
}
function chkImg() {
// don’t execute code if the editor is readOnly
if (editor.readOnly)
return;
setTimeout( function() {
editor.document.$.body.innerHTML = replaceImgText(editor.document.$.body.innerHTML);
},100);
}
editor.on( ‘contentDom’, function() {
// For Firefox
editor.document.on(‘drop’, chkImg);
// For IE
editor.document.getBody().on(‘drop’, chkImg);
});
editor.on( ‘paste’, function(e) {
var html = e.data.dataValue;
if (!html)
return;
e.data.dataValue = replaceImgText(html);
});
} //Init
} );[/code]
Must open this demo into Firefox browser to see how to restrict user against direct image paste OR drag & drop image on CKEditor body using this plug-in.
Click Here to download this plug-in.
Installation steps:
- Copying the files
Extract the contents of the blockimagepaste.zip and paste directory ‘blockimagepaste’ into plugin directory of ckeditor, so it ends up like this1ckeditor\ ... images\ lang\ plugins\ ... blockimagepaste\ plugin.js ... skins\ themes\ - Adding it to CKEdtior
Now add the plugin in your config.js or custom js configuration file1config.extraPlugins='blockimagepaste'; - Use it
Using Firefox, paste an image into the body of CKEditor and “Direct image paste is not allowed.” message will prompt.
Hope this helps you…