Allow for filtering HTML data

[Jakub Ś]

Problem
This ticket is related to - #588

Some clients ask about possibility to filter/block/modify certain HTML elements E.g.

1. How to remove all elements except strong and u tags and text nodes that are inside forbidden elements?
2. How to delete all a tags but leave their contents?
3. How to wrap all images in spans?

Below I have presented some incomplete solutions (just put code in config.js). You may ask why Incomplete?
The below semi-solutions work on initial data or when switching to source and back or when pasting with CRTL+V, but they don’t work with plugins that insert these particular tags.

---

Proposed solution
The new feature here might be some white-list/ black-list or simply list based filter that would:

• remove tags that are on the black-list
• remove tags that are on the black-list but depending on some filter configuration setting it would leave or remove tag contents.
• would change tags that are on black-list to other tags that are on white-list.
• “Which tags should be changed to which” should be also defined in configuration option (something that user can define), perhaps in form of an object where properties are tag names:

  var myFilterList = {
  	a : '',
  	strong : 'b',
  	img : 'img:span'					
  }
  

• Please note that object used above can tell filter to remove tag (a : ), change it (strong : 'b'), or wrap it (img : 'img:span').

---

Semi-solutions

This code wrap images in spans

on :{
	'pluginsLoaded' : function( evt ){ //it must be done before "instanceReady" to make the tag blocking in effect
		evt.editor.dataProcessor.dataFilter.addRules({
			elements :{
				span : function( element ) {
					//the rule for img is dumm as it keeps adding span tags the idea is to remove span and let img add it
					if ( element._processed )
						return;
					if(element.attributes.id == 'cke_image_s_wrapper')
						delete element.name;
				},
				img : function( element )
				{
					if ( element._processed )
						return;
					element._processed = 1;
					element.alt = (!element.attributes.alt ? element.attributes.alt : 'An image');
					var parent = new CKEDITOR.htmlParser.element('span');
					parent.attributes.style='border:10px solid #f00;display: inline-block;';
					parent.attributes.id='cke_image_s_wrapper';
					parent.add(element);
					parent._processed = 1
					return parent;
				}
			}
		});
	}
}

This code removes a tags but leaves their contents

on :
  {
	  'pluginsLoaded' : function( evt )  //it must be done before "instanceReady" to make the tag blocking in effect
	  {							  
		  evt.editor.dataProcessor.dataFilter.addRules(
		  {
			  elements :
			  {
				a : function( element ) 
				{			delete element.name									
}				
			  }
		  } );
	  }
 }

[Jakub Ś]

This ticket will not be fixed for CKE 3.x but will be fixed for CKE 4.x what has already been described in #9829.

Closing this one as DUP of #9829