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.