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';
};

 

Posted 2 months ago

Hi comunidadmexi...,

Use below code.

config.js

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.toolbar = 'Full';
    config.toolbar_Full =
        [
            { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] },
            { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
            { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },
            {
                name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
                    'HiddenField']
            },
            '/',
            { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
            {
                name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv',
                    '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl']
            },
            { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
            { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] },
            '/',
            { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
            { name: 'colors', items: ['TextColor', 'BGColor'] },
            { name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About'] }
        ];

    config.extraPlugins = 'blockimagepaste';
};

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) {
                    return '';
                });

            return ret;
        }

        function chkImg() {
            if (editor.readOnly) {
                return;
            }

            setTimeout(function () {
                editor.document.$.body.innerHTML = replaceImgText(editor.document.$.body.innerHTML);
            }, 100);
        }

        editor.on('contentDom', function () {
            editor.document.on('drop', chkImg);
            editor.document.getBody().on('drop', chkImg);
            editor.document.on('paste', function (e) { chkImg(editor); });
            editor.document.getBody().on('paste', function (e) { chkImg(editor); });
        });
    } // Init
});

HTML

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
<script src="Scripts/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
    window.onload = function () {
        CKEDITOR.replace('TextBox1');
    }
</script>