CKEditor - preventing users from pasting images

Question

I would like giving my users a limited editor, using the great CKEditor.

I was trying to prevent people from adding images, therefore I've blocked the "Source" view and disabled the "paste" button (leaving only the Paste as Text button).

However, it is still possible to paste images (copied from web page). Is there a way to prevent that as well ?

Thanks.

score 9 · Answer 1 · answered Apr 16 '14 at 05:51

I know its been a while but if anyone else comes across this same problem.

You should use a plugin as described here to check for all images and if user tries to insert an image, then he is alerted that "images" are not allowed.

Please note that the plugin is not available to download so we might have to create our own plugin. Its pretty simple. We just have to copy and paste his code in plugin.js file.

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

Another option is explained here (which I believe only works on paste event doesn't do anything when image is dragged ! )

Sorry but, I have tried on FF & Chrome. And it works. I haven't tried on other browsers. — Nis, Apr 21 '14 at 22:59
It seems that your regex for the img-tag won't recognize the tags in html code, however this was my problem while including your plugin to my project. I used the RegExp from http://stackoverflow.com/a/18665234/1456932 and surrounded it with braces "()" to ensure it gets fully replaced. — DmiN, Oct 14 '14 at 13:24
To work correctly for me I add \s* (as any spaces) in the regular expression after the first " (double quote), after that it's ok. Thank you! — Verter, May 11 '21 at 08:54

score 3 · Accepted Answer · answered Jul 05 '11 at 14:28

3

You can use the 'paste' event, that way you can remove anything that you don't like. And of course, you should also verify the content at the server before saving.

answered Jul 05 '11 at 14:28

AlfonsoML

12,634
2
46
53

Thanks for the reply. Have you got any code example ? Can I prevent adding links this way as well ? – Ranch Jul 06 '11 at 15:21

score 1 · Answer 3 · edited Jan 29 '19 at 12:21

that was useful, I used the solution of Nis. but the problem is that if you drop a image, the paste event is lost. I made a change to prevent this situation.

(function(){
    var pluginName = 'blockimagepaste';
    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(editor) {
        // 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);
    };

    CKEDITOR.plugins.add( pluginName, {
        icons: pluginName,
        init : function( editor ){

            editor.on( 'contentDom', function() {
                // For Firefox
                editor.document.on('drop', function(e) {chkImg(editor);});
                // For IE
                editor.document.getBody().on('drop', function(e) {chkImg(editor);});

                editor.document.on( 'paste', function(e) {chkImg(editor);});

                // For IE
                editor.document.getBody().on('paste', function(e) {chkImg(editor);});
            });

        } //Init
    });

})();

score 0 · Answer 4 · answered Feb 16 '15 at 04:45

If you want to be able to prevent this in the Source view as well, just add this code to your plugin:

editor.on('key', function(e) {
    var html = CKEDITOR.currentInstance.getData();
    if (!html) {
        return;
    }
    CKEDITOR.currentInstance.setData(replaceImgText(html));
});

CKEditor - preventing users from pasting images

4 Answers4

Linked