allowedContent, i can still add images

[janwillem]

When I use the following code, all tags will be stripped, except for images. I can still drag and drop an image and it won't get stripped.

$( 'textarea' ).ckeditor({toolbar:'frontend', height:200, allowedContent: 'p strong em u ul li'});

[Jakub Ś]

Sure you can do it for example in Firefox as this is FF feature. ACF only works when setData(), getData() and insertHtml() are used.
What this means is that when you switch to source and back or extract data from editor or submit data this image is going to be removed.

The only issue I see here is that user first sees image but when he for example submits data then this image is removed. User may be impleaded with such behaviour but this is how it works and can't be changed.
On the other hand if there is no button for images and user can't insert HTML code in Source area then he most likely knows that images can't be inserted into editor and what he does doesn’t have to work and it won't when he submits data.

[janwillem]

That's a pity. I'd like to disable it entirely. The editor is being used in the front-end.

It's not relevant to this ticket, but is there a way to disable drag and drop?

[Piotrek Koszuliński]

Actually, D&D is also an input method, so it also should be filtered. And it will be as soon as we'll have D&D support. Currently browsers handle this, in the future we will and then D&D will be secured too. So this ticket is valid, but it duplicates tickets for better D&D support.

[Jakub Ś]

You can block images dropping in editor with below code. It will work in Firefox and Chrome.

editor.on( 'pluginsLoaded', function( evt )
			{
				// catches changes in WYSIWYG mode.
					editor.on( 'contentDom', function( e )
					{		
						var editable = e.editor.editable();		
						var doc = editor.document;						
						editable.attachListener( doc, 'drop', function( event )
						{						
							console.log('drop');
							console.log(event);							
							event.data.preventDefault();
						} );												
					} );
			});		

Rest of the browsers - Safari 5.1 (haven't checked 5.2), IE8-10 and Opera will display image on page (loading it in new page) despite the code. What you can do is block dropping files in main window and editor iframe with below:

editor.on( 'instanceReady', function( evt )
			{	
				if(window.addEventListener){
					window.addEventListener("drop",function(e){
					  e = e || window.event;
					  e.preventDefault();
					},false);
					
					window.addEventListener("dragover",function(e){
					  e = e || window.event;
					  e.preventDefault();
					},false);
				
					var iframeWin = window.document.getElementsByTagName('iframe')[0].contentWindow;
					iframeWin.addEventListener("dragover",function(e){
					  e = e || iframeWin.event;
					  e.preventDefault();
					},false);
					
					iframeWin.addEventListener("drop",function(e){
					  e = e || iframeWin.event;
					  e.preventDefault();
					},false);
				}else {
					//attach same event for older IEs
				}				
			});

These two should work in most scenarios.

There is also one drawback - with this code you won't be able to move images (from one place to another) inside editor. Perhaps there is something that can be done about it.

[janwillem]

Thanks for the replies. I'll try to insert the code you posted j.swiderski.

It's purely to maximise the user experience. When they try to insert an image in every possible way, it'll get filtered anyway.