Latest revision as of 09:14, 6 June 2011

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.