Geek Answers Handbook

CKEditor - preventing users from sticking images

I would like to provide my users with a limited editor using the excellent CKEditor.

I tried to prevent people from adding images, so I blocked the "Source" view and disabled the "Insert" button (leaving only the "Insert as text" button).

However, you can still paste images (copied from a web page). Is there any way to prevent this?

Thanks.

+4
source share
4 answers

You can use 'paste' so you can remove anything you don't like. And, of course, you should also check the contents on the server before saving.

+3
source

I know it has been a while, but if anyone else is facing this problem.

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

Please note that the plugin is not available for download, so we may need to create our own plugin. It is pretty simple. We just need to copy and paste its code into the 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 when pasted, does nothing when the image is being dragged!)

+5
source

It was helpful, I used Nis solution. but the problem is that if you drop the image, the insert event will be lost. I made changes 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 }); })();
+1
source

If you want to prevent this from happening in the Source view, 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)); });
0
source

More articles:


All Articles