Block Drag & Drop Image OR Direct Image Paste into CKEditor Using Firefox

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:

1. Copying the files
   Extract the contents of the blockimagepaste.zip and paste directory ‘blockimagepaste’ into plugin directory of ckeditor, so it ends up like this
   ckeditor\ ... images\ lang\ plugins\ ... blockimagepaste\ plugin.js ... skins\ themes\

   1	ckeditor\        ...        images\        lang\        plugins\               ...               blockimagepaste\                       plugin.js               ...        skins\        themes\

2. Adding it to CKEdtior
   Now add the plugin in your config.js or custom js configuration file
   config.extraPlugins='blockimagepaste';

   1	config.extraPlugins='blockimagepaste';

3. 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…