Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#10747 closed Bug (wontfix)

allowedContent, i can still add images

Reported by: janwillem Owned by:
Priority: Normal Milestone:
Component: General Version: 4.2
Keywords: Cc:

Description

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

Change History (5)

comment:1 Changed 6 years ago by Jakub Ś

Keywords: allowedContent images removed
Resolution: wontfix
Status: newclosed

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.

comment:2 Changed 6 years ago by 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?

comment:3 Changed 6 years ago by 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.

comment:4 Changed 6 years ago by 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.

comment:5 Changed 6 years ago by 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.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy