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> 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 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 }); 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.