Opened 8 years ago

Closed 7 years ago

#8726 closed New Feature (duplicate)

Allow for filtering HTML data

Reported by: Jakub Ś Owned by:
Priority: Normal Milestone:
Component: Core : Parser Version: 3.0
Keywords: Cc:

Description (last modified by 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									
}				
			  }
		  } );
	  }
 }

Change History (4)

comment:1 Changed 8 years ago by Jakub Ś

Status: newconfirmed

comment:2 Changed 7 years ago by Jakub Ś

Component: GeneralCore : Parser
Description: modified (diff)

comment:3 Changed 7 years ago by Jakub Ś

Description: modified (diff)

comment:4 Changed 7 years ago by Jakub Ś

Resolution: duplicate
Status: confirmedclosed

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

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