How Do I Output HTML code in FCKeditor Style?

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

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>

<p>First line<br />
Second line<br />
Third line</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 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 tag causes indentation on line breaks inside of it.
			indent : false,
			// Insert a line break before tag.
			breakBeforeOpen : true,
			// Insert a line break after tag.
			breakAfterOpen : false,
			// Insert a line break before closing tag.
			breakBeforeClose : false,
			// Insert a line break after 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 the single elements.
	ev.editor.dataProcessor.writer.setRules( 'table',
	{ 		
		indent : true
	});	
});

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