CKEditor - preventing users from pasting images

后端 未结 4 847
庸人自扰
庸人自扰 2021-02-10 02:54

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 a

4条回答
  •  忘了有多久
    2021-02-10 03:31

    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( /]*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 ! )

提交回复
热议问题