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> cell_1.1</td> <td> 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> cell_1.1</td> <td> 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.