Create new dom elements using dataProcessor.htmlFilter

I'm afraid that you'll need to update CKEditor to 4.1. In this version I rewrote nearly entire filters implementation what made it more reliable. In the previous versions is unsafe to do DOM structure operations when filtering data. Now it's safer, although I would rather use editor#toHtml and editor#toDataFormat events or combination of data processor's filters (to cache paragraphs that should be transformed to <figure>) and these events to make bigger changes (after applying filters, so with priorities 11-14).

Anyway - this solution usually works on 4.1 (check comments):

CKEDITOR.replace( 'editor1', {
	on: {
		loaded: function( evt ) {
			var editor = evt.editor,
				rules = {
					elements: {
						img: function( element ) {
							delete element.attributes.style;
						},

						p: function( element ) {
							// This is not a complete test. In some cases
							// besides image there might be text nodes -
							// spaces or even zero-width space. Although image
							// usually will be the first child.
							if ( element.children.length == 1 && element.children[ 0 ].name == 'img' ) {
								element.name = 'figure';

								// Note that filter for 'p' will be executed before filter for 'img',
								// so we need to set alt now.
								var img = element.children[ 0 ];
								if ( !img.attributes.alt )
									img.attributes.alt = 'Dummy alt text';

								var figcaption = CKEDITOR.htmlParser.fragment.fromHtml( img.attributes.alt, 'figcaption' );
								element.add( figcaption );
							}
						}
					}
				};

			// It's good to set both filters - dataFilter is used when loading data and htmlFilter when retrieving.
			editor.dataProcessor.htmlFilter.addRules( rules );
			editor.dataProcessor.dataFilter.addRules( rules );

			// Since 4.1 you need to add specific tags to to Advanced Content Filter
			// so they will be allowed in editor.
			editor.filter.allow( 'figcaption figure' );
		}
	}
} );

I tested it on 3.6.6 and as I thought it crashed the filter. And because editor#toHtml and editor#toDataFormat events were also introduced in 4.1 it's very hard to write reliable solution for <4.1.

BTW. Check Widgets feature on which we're currently worki on. Sample that shows this new issue is already ready and there will be widget that will do excatly what you want. However, thanks to widgets this solution will have great advantage over what can you achieve in <4.2 because the <figure> element will be non-editable - user won't be able to ruin it.

BTW. I just thought that in old versions you can achieve satisfying results with regexp and editor#setData and editor#getData events.

editor.on( 'setData', function( evt ) {
	evt.data.dataValue = evt.data.dataValue.replace( /<p>\s*<img[^>]+>\s*<\/p>/g, function( match ) {
		var imgHtml = match.match( /<img[^>]+>/ )[ 0 ],
			imgFrag = CKEDITOR.htmlParser.fragment.fromHtml( imgHtml );

		return '<figure>' + imgHtml + '<figcaption>' + imgFrag.children[ 0 ].attributes.alt + '</figcaption></figure>' ;
	} );
} );

You can also play with img on this level (e.g. remove styles) and using CKEDITOR.htmlParser.basicWriter write it back to string.

Hello,

I'm using version 4.1 of the CKEditor. I recently saw this post and it is similar to what I have been tasked to do.  Here is the use case. A user paste in an html table (shown below).

 After pasteing I would like to use the filters to transform the table into the following.

<table props="MCF">
 <tgroup cols="2">
   <colspec colnum="1" colname="col1" colwidth="*"/>
   <colspec colnum="2" colname="col2" colwidth="*"/>
	<thead>
		<row>
			<entry scope="col">Column Header</entry>
			<entry scope="col">Column Header</entry>
		</row>
	</thead>
	<tbody>
		<row>
			<entry>Cell 1 Row 1</entry>
			<entry>Cell 2 Row 1</entry>
		</row>
	</tbody>
	<tbody>
		<row>
			<entry>Cell 1 Row 2</entry>
			<entry>Cell 2 Row 2</entry>
		</row>
	</tbody>
 </tgroup>
</table>

 To get started I added the below code to transform the <tr> tags into <row> tags.

......

CKEDITOR.dtd.thead[ 'row' ] = 1;
CKEDITOR.dtd.tbody[ 'row' ] = 1;
			
rules = {
	elements: {
	 tr: function( element ) {
	 console.log("Element Name: "+element.children[0].name+" length: "+element.children.length);
							
	if (element.children[0].name == 'td' || element.children[0].name == 'th' ) {
	 element.name = 'row';
	 console.log("TR Replaced"+element.children[0].name);	
								
		}
	     }
	   }
	};
				
 // dataFilter is used when loading data and htmlFilter when retrieving.
editor.dataProcessor.dataFilter.addRules( rules );
editor.dataProcessor.htmlFilter.addRules( rules );
editor.filter.allow( 'row' );  
....

This is the result:

<row></row><row></row><row></row>
<table>
	<tbody><row>
		<th>Column Header&nbsp;</th>
		<th><b>Column Header&nbsp;</b></th>
		</row>
	</tbody>
	<tbody><row>
		<td>Cell 1 Row 1</td>
		<td>Cell 2 Row 1</td>
		</row>
	</tbody>
	<tbody><row>
		<td>Cell 1 Row 2</td>
		<td>Cell 2 Row 2</td>
		</row>
	</tbody>
</table>

The source shows that the <tr> tags are replaced with <row> tags however you can see the extraneous <row> tags. It seems the editor does not know where to add the <row> tags into the dom in all cases. Not sure why thead got replaced with <tbody>. 

Do you think I can use this approch to  generate this new table structure ? 

• tr => row
• td => entry
• add tgroup

If you have some sample code which works with tables in this way that would be gratly apraeciated. I am very new to the ckeditor but it is a great tool.

thanks

I wanted to edit my post for spelling. After selecting preview there didn't seem to be a way to get back to the editor. It seems the spam filter is blocking me from editing the original post.. :-)

Ok I wanted to add one more important point The table does not render in the WYSIWYG editor. 

Hi Folks,

Does anyone have any thoughts on my post on html table element tranformation in the above post (6, 7) using dataProcessor.htmlFilter, dataFilter. 

@Stellatyler thanks for the tip.