CKEditor 3.x/Howto/FCKeditor HTML Output - Revision history

J.swiderski at 08:14, 6 June 2011

2011-06-06T08:14:57Z

Anna: Undo revision 6360 by J.swiderski (Talk)

2011-06-06T07:59:08Z

Undo revision 6360 by J.swiderski (Talk)

Anna: Undo revision 6361 by J.swiderski (Talk)

2011-06-06T07:58:45Z

Undo revision 6361 by J.swiderski (Talk)

J.swiderski at 13:34, 3 June 2011

2011-06-03T13:34:19Z

J.swiderski at 13:23, 3 June 2011

2011-06-03T13:23:34Z

Anna: Article contents added

2011-06-03T12:13:02Z

Article contents added

New page

{{#CUSTOMTITLE:How Do I Output HTML code in FCKeditor Style?}}
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:
<source lang="html4strict">
<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>
</source>

CKEditor 3.x formats HTML source code in the following way, using tabs and indenting element contents:
<source lang="html4strict">
<p>
Some text</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>
</source>

If you would like to go back to FCKeditor formatting, you can achieve it by adding the following code to your <code>config.js</code> file:

<source lang="javascript">
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 : true,
// 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
});
}

// You can also apply the rules to a single element.
ev.editor.dataProcessor.writer.setRules( 'br',
{
breakAfterOpen : true
});
});
</source>

More information about HTML source formatting can also be found in the [[CKEditor_3.x/Developers_Guide/Output_Formatting|Output Formatting]] article from the [[CKEditor_3.x/Developers_Guide|Developer's Guide]].

@@ Line 88: / Line 88: @@
 	//You can also apply the rules to the single elements.
 	ev.editor.dataProcessor.writer.setRules( 'table',
+	{
 		indent : true

@@ Line 88: / Line 88: @@
 	//You can also apply the rules to the single elements.
 	ev.editor.dataProcessor.writer.setRules( 'table',
+	{
 		indent : true

@@ Line 23: / Line 23: @@
 <p>
 	Some text</p>
 <table border="1" cellpadding="1" cellspacing="1" height="100" width="200">
@@ Line 58: / Line 63: @@
 		ev.editor.dataProcessor.writer.setRules( e, {
 			// Indicates that an element creates indentation on line breaks that it contains.
-			indent : true,
+			indent : false,
 			// Inserts a line break before a tag.
 			breakBeforeOpen : true,
@@ Line 67: / Line 72: @@
 			// Inserts a line break after the closing tag.
 			breakAfterClose : true
 		});
+	}
 	// You can also apply the rules to a single element.
-	ev.editor.dataProcessor.writer.setRules( 'br',
+	ev.editor.dataProcessor.writer.setRules( 'table',
-−
+	{
-		breakAfterOpen : true
+		indent : true
 	});
 });
 </source>
 More information about HTML source formatting can also be found in the [[CKEditor_3.x/Developers_Guide/Output_Formatting|Output Formatting]] article from the [[CKEditor_3.x/Developers_Guide|Developer's Guide]].

@@ Line 3: / Line 3: @@
 <source lang="html4strict">
 <p>Some text</p>
 <table width="200" cellspacing="1" cellpadding="1" border="1" height="100">
@@ Line 27: / Line 23: @@
 <p>
 	Some text</p>
 <table border="1" cellpadding="1" cellspacing="1" height="100" width="200">
@@ Line 59: / Line 50: @@
 	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).
+	// 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 tag causes indentation on line breaks inside of it.
+			// Indicates that an element creates indentation on line breaks that it contains.
-			indent : false,
+			indent : true,
-			// Insert a line break before tag.
+			// Inserts a line break before a tag.
 			breakBeforeOpen : true,
-			// Insert a line break after tag.
+			// Inserts a line break after a tag.
 			breakAfterOpen : false,
-			// Insert a line break before closing tag.
+			// Inserts a line break before the closing tag.
 			breakBeforeClose : false,
-			// Insert a line break after closing tag.
+			// Inserts a line break after the closing tag.
 			breakAfterClose : true
 		});
+	}
-−
-	for ( var e in CKEDITOR.tools.extend( {}, dtd.$list, dtd.$listItem, dtd.$tableContent ) )
+	// You can also apply the rules to a single element.
+	{
-		ev.editor.dataProcessor.writer.setRules( e, {
+		breakAfterOpen : true
 	});
 });