Prevent (Restrict) users from pasting Image in CKEditor in ASP.Net

Last Reply 2 months ago By dharmendr

Posted 2 months ago

Hi,

I cannot preventing pasting of Images using a CKEditor plugin on my project ASP NET C# in browser

I have tried without success

  1. CKEditor - preventing users from pasting images
  2. https://drupalwise.wordpress.com/2013/06/12/how-to-prevent-pasting-images-in-ckeditor-through-firefox/
  3. https://camerongregor.com/2016/11/14/preventing-pasting-of-images-in-ckeditor/

blockimagepaste.js

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("Pasting Image Data is not allowed. Please use the Image Upload button (if available).");
                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
});

config.js

CKEDITOR.editorConfig = function (config) {
    config.extraPlugins = 'blockimagepaste';
};

 

This question does not have replies that have been liked.