How Do I Output HTML code in FCKeditor Style?

In FCKeditor 2.x, the predecessor of CKEditor 3.x, HTML source was formatted in the following way, using spaces and placing the element tags and contents in one line:

<p>Some text</p>
 
<table width="200" cellspacing="1" cellpadding="1" border="1" height="100">
    <tbody>
        <tr>
            <td>&nbsp;cell_1.1</td>
            <td>&nbsp;cell_1.2</td>
        </tr> 
    </tbody>
</table>
 
<ul>
    <li>item_1</li>
    <li>item_2</li>
</ul>

CKEditor 3.x formats HTML source code in the following way, using tabs and indenting element contents:

<p>
	Some text</p>
 
<p>
	First line<br />
	Second line<br />
	Third line</p>
 
<table border="1" cellpadding="1" cellspacing="1" height="100" width="200">
	<tbody>
		<tr>
			<td>
				&nbsp;cell_1.1</td>
			<td>
				&nbsp;cell_1.2</td>
		</tr>
	</tbody>
</table>
 
<ul>
	<li>
		item_1</li>
	<li>
		item_2</li>
</ul>

If you would like to go back to FCKeditor formatting, you can achieve it by adding the following code to your config.js file:

CKEDITOR.on( 'instanceReady', function( ev )
{
	var writer = ev.editor.dataProcessor.writer; 
	// The character sequence to use for every indentation step.
	writer.indentationChars = '    ';
 
	var dtd = CKEDITOR.dtd;
	// Elements taken as an example are: block-level elements (div or p), list items (li, dd), and table elements (td, tbody).
	for ( var e in CKEDITOR.tools.extend( {}, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
	{
		ev.editor.dataProcessor.writer.setRules( e, {
			// Indicates that an element creates indentation on line breaks that it contains.
			indent : false,
			// Inserts a line break before a tag.
			breakBeforeOpen : true,
			// Inserts a line break after a tag.
			breakAfterOpen : false,
			// Inserts a line break before the closing tag.
			breakBeforeClose : false,
			// Inserts a line break after the closing tag.
			breakAfterClose : true
		});
	}
 
	for ( var e in CKEDITOR.tools.extend( {}, dtd.$list, dtd.$listItem, dtd.$tableContent ) )
	{
		ev.editor.dataProcessor.writer.setRules( e, {			
			indent : true,
		});
	}
 
	// You can also apply the rules to a single element.
	ev.editor.dataProcessor.writer.setRules( 'table',
	{ 		
		indent : true
	});	
 
	ev.editor.dataProcessor.writer.setRules( 'form',
	{ 		
		indent : true
	});		
});

More information about HTML source formatting can also be found in the Output Formatting article from the Developer's Guide.

This page was last modified on 6 June 2011, at 10:14.