CKEditor 3.x/Developers Guide/Output Formatting - Revision history

Anna: /* The HTML Writer */ Typo in code corrected

2011-01-13T13:53:55Z

‎The HTML Writer: Typo in code corrected

Anna: Article proof-read, links added

2011-01-13T11:22:40Z

Article proof-read, links added

Anna: Article & codes formatted

2011-01-13T10:52:08Z

Article & codes formatted

Wiktor at 07:04, 30 September 2009

2009-09-30T07:04:56Z

Fredck: New page: CKEditor offers a powerful and flexible output formatting system, giving developers full control on how the HTML produced by it must look like. It's possible to control every single tag on...

2009-08-25T10:45:45Z

New page: CKEditor offers a powerful and flexible output formatting system, giving developers full control on how the HTML produced by it must look like. It's possible to control every single tag on...

New page

CKEditor offers a powerful and flexible output formatting system, giving developers full control on how the HTML produced by it must look like. It's possible to control every single tag on it, having a different result for each one of them.

== The HTML Writer ==

Technically speaking, writing the final output is a task executed by the [http://docs.fckeditor.net/ckeditor_api/symbols/CKEDITOR.htmlWriter.html CKEDITOR.htmlWriter] class ("writer"), used by the CKEDITOR.htmlDataProcessor class. Therefore, the current writer instance for a specific editor instance can be retrieved by the <editorInstance>.dataProcessor.writer property.

By setting the writer properties, it's possible to configure several output formatting options. The following example is the best way to summarize the most used of them, with their default values:
<pre>var writer = editor.dataProcessor.write;

// The character sequence to use for every indentation step.
writer.indentationChars = '\t';

// The way to close self closing tags, like .
writer.selfClosingEnd = ' />';

// The character sequence to be used for line breaks.
writer.lineBreakChars = '\n';

// Set writing rules for the tag.
writer.setRules( 'p',
{
// Indicates that this tag causes indentation on line breaks inside of it.
indent : true,

// Insert a line break before the tag.
breakBeforeOpen : true,

// Insert a line break after the tag.
breakAfterOpen : true,

// Insert a line break before the closing tag.
breakBeforeClose : false,

// Insert a line break after the closing tag.
breakAfterClose : true
});
</pre>
== Setting Writer Rules ==

Because the writer is a property of each editor instance, and also because it's dependency on the writer plugin to be loaded, the best way to make changes to it is by listening to the "instanceReady" event, so it's safe to assume that the dataProcessor property will be loaded and ready to changes. The following is an example of it, when creating an editor instance:
<pre>CKEDITOR.replace( 'editor1',
{
on :
{
instanceReady : function( ev )
{
// Output paragraphs as Text.
this.dataProcessor.writer.setRules( 'p',
{
indent : false,
breakBeforeOpen : true,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : true
});
}
}
});
</pre>
Another way for it is by using the [http://docs.fckeditor.net/ckeditor_api/symbols/CKEDITOR.html CKEDITOR] object, so all editor instances will be changed:
<pre>CKEDITOR.on( 'instanceReady', function( ev )
{
// Out self closing tags the HTML4 way, like .
ev.editor.dataProcessor.writer.selfClosingEnd = '>';
});
</pre>

@@ Line 6: / Line 6: @@
 It is possible to configure several output formatting options by setting the writer properties. The following example summarizes the most used of them, giving their default values:
 <source language="js">
-var writer = editor.dataProcessor.write;
+var writer = editor.dataProcessor.writer;
 // The character sequence to use for every indentation step.

@@ Line 1: / Line 1: @@
-CKEditor offers a powerful and flexible output formatting system, giving developers full control on how the HTML produced by it must look like. It's possible to control every single tag on it, having a different result for each one of them.
+CKEditor offers a powerful and flexible output formatting system. It gives developers full control over what the HTML code produced by the editor will look like. The system makes it possible to control all HTML tags and can give a different result for each one of them.
 == The HTML Writer  ==
 Technically speaking, writing the final output is a task executed by the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.htmlWriter.html CKEDITOR.htmlWriter]</code> class ("writer"), used by the <code>CKEDITOR.htmlDataProcessor</code> class. Therefore, the current writer instance for a specific editor instance can be retrieved by the <code>''editorInstance''.dataProcessor.writer</code> property.
-By setting the writer properties, it's possible to configure several output formatting options. The following example is the best way to summarize the most used of them, with their default values:
+It is possible to configure several output formatting options by setting the writer properties. The following example summarizes the most used of them, giving their default values:
 <source language="js">
 var writer = editor.dataProcessor.write;
@@ Line 17: / Line 17: @@
 writer.lineBreakChars = '\n';
-// Set writing rules for the <p> tag.
+// The writing rules for the <p> tag.
 writer.setRules( 'p',
+     {
@@ Line 23: / Line 23: @@
          indent : true,
-         // Insert a line break before the <p> tag.
+         // Inserts a line break before the <p> opening tag.
          breakBeforeOpen : true,
-         // Insert a line break after the <p> tag.
+         // Inserts a line break after the <p> opening tag.
          breakAfterOpen : true,
-         // Insert a line break before the </p> closing tag.
+         // Inserts a line break before the </p> closing tag.
          breakBeforeClose : false,
-         // Insert a line break after the </p> closing tag.
+         // Inserts a line break after the </p> closing tag.
          breakAfterClose : true
      });
@@ Line 38: / Line 38: @@
 == Setting Writer Rules  ==
-Because the writer is a property of each editor instance, and also because it's dependency on the writer plugin to be loaded, the best way to make changes to it is by listening to the <code>instanceReady</code> event, so it's safe to assume that the <code>dataProcessor</code> property will be loaded and ready to changes. The following is an example of it, when creating an editor instance:
+Because the writer is a property of each editor instance, and also due to its dependency on the writer plugin to be loaded, the best way to modify it is by listening to the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#event:instanceReady instanceReady]</code> event, so it is safe to assume that the <code>dataProcessor</code> property will be loaded and ready for changes. The following code shows an example of this approach used when creating an editor instance:
 <source language="js">
 CKEDITOR.replace( 'editor1',
@@ Line 59: / Line 59: @@
      });
 </source>
-Another way for it is by using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html CKEDITOR]</code> object, so all editor instances will be changed:
+Another method is to use the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html CKEDITOR]</code> object, so all editor instances will be changed:
 <source language="js">
 CKEDITOR.on( 'instanceReady', function( ev )
+     {
-         // Out self closing tags the HTML4 way, like <br>.
+         // Ends self closing tags the HTML4 way, like <br>.
          ev.editor.dataProcessor.writer.selfClosingEnd = '>';
      });
 </source>

@@ Line 2: / Line 2: @@
 == The HTML Writer  ==
+Technically speaking, writing the final output is a task executed by the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.htmlWriter.html CKEDITOR.htmlWriter]</code> class ("writer"), used by the <code>CKEDITOR.htmlDataProcessor</code> class. Therefore, the current writer instance for a specific editor instance can be retrieved by the <code>''editorInstance''.dataProcessor.writer</code> property.
 By setting the writer properties, it's possible to configure several output formatting options. The following example is the best way to summarize the most used of them, with their default values:
-<pre>var writer = editor.dataProcessor.write;
+<source language="js">
 // The character sequence to use for every indentation step.
 writer.indentationChars = '\t';
-// The way to close self closing tags, like &lt;br /&gt;.
+// The way to close self closing tags, like <br />.
-writer.selfClosingEnd = ' /&gt;';
+writer.selfClosingEnd = ' />';
 // The character sequence to be used for line breaks.
 writer.lineBreakChars = '\n';
-// Set writing rules for the &lt;p&gt; tag.
+// Set writing rules for the <p> tag.
 writer.setRules( 'p',
+     {
          // Indicates that this tag causes indentation on line breaks inside of it.
-         indent&nbsp;: true,
+         indent : true,
-         // Insert a line break before the &lt;p&gt; tag.
+         // Insert a line break before the <p> tag.
-         breakBeforeOpen&nbsp;: true,
+         breakBeforeOpen : true,
-         // Insert a line break after the &lt;p&gt; tag.
+         // Insert a line break after the <p> tag.
-         breakAfterOpen&nbsp;: true,
+         breakAfterOpen : true,
-         // Insert a line break before the &lt;/p&gt; closing tag.
+         // Insert a line break before the </p> closing tag.
-         breakBeforeClose&nbsp;: false,
+         breakBeforeClose : false,
-         // Insert a line break after the &lt;/p&gt; closing tag.
+         // Insert a line break after the </p> closing tag.
-         breakAfterClose&nbsp;: true
+         breakAfterClose : true
      });
-</pre>
+</source>
 == Setting Writer Rules  ==
+Because the writer is a property of each editor instance, and also because it's dependency on the writer plugin to be loaded, the best way to make changes to it is by listening to the <code>instanceReady</code> event, so it's safe to assume that the <code>dataProcessor</code> property will be loaded and ready to changes. The following is an example of it, when creating an editor instance:
-Because the writer is a property of each editor instance, and also because it's dependency on the writer plugin to be loaded, the best way to make changes to it is by listening to the "instanceReady" event, so it's safe to assume that the dataProcessor property will be loaded and ready to changes. The following is an example of it, when creating an editor instance:
+<source language="js">
-<pre>CKEDITOR.replace( 'editor1',
+CKEDITOR.replace( 'editor1',
+     {
-         on&nbsp;:
+         on :
+         {
-             instanceReady&nbsp;: function( ev )
+             instanceReady : function( ev )
+             {
-                 // Output paragraphs as &lt;p&gt;Text&lt;/p&gt;.
+                 // Output paragraphs as <p>Text</p>.
                  this.dataProcessor.writer.setRules( 'p',
+                     {
-                         indent&nbsp;: false,
+                         indent : false,
-                         breakBeforeOpen&nbsp;: true,
+                         breakBeforeOpen : true,
-                         breakAfterOpen&nbsp;: false,
+                         breakAfterOpen : false,
-                         breakBeforeClose&nbsp;: false,
+                         breakBeforeClose : false,
-                         breakAfterClose&nbsp;: true
+                         breakAfterClose : true
                      });
+             }
+         }
      });
-</pre>
+</source>
-Another way for it is by using the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html CKEDITOR] object, so all editor instances will be changed:
+Another way for it is by using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html CKEDITOR]</code> object, so all editor instances will be changed:
-<pre>CKEDITOR.on( 'instanceReady', function( ev )
+<source language="js">
+     {
-         // Out self closing tags the HTML4 way, like &lt;br&gt;.
+         // Out self closing tags the HTML4 way, like <br>.
-         ev.editor.dataProcessor.writer.selfClosingEnd = '&gt;';
+         ev.editor.dataProcessor.writer.selfClosingEnd = '>';
      });
-</pre>
+</source>

@@ Line 3: / Line 3: @@
 == The HTML Writer  ==
-Technically speaking, writing the final output is a task executed by the [http://docs.fckeditor.net/ckeditor_api/symbols/CKEDITOR.htmlWriter.html CKEDITOR.htmlWriter] class ("writer"), used by the CKEDITOR.htmlDataProcessor class. Therefore, the current writer instance for a specific editor instance can be retrieved by the &lt;editorInstance&gt;.dataProcessor.writer property.
+Technically speaking, writing the final output is a task executed by the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.htmlWriter.html CKEDITOR.htmlWriter] class ("writer"), used by the CKEDITOR.htmlDataProcessor class. Therefore, the current writer instance for a specific editor instance can be retrieved by the &lt;editorInstance&gt;.dataProcessor.writer property.
 By setting the writer properties, it's possible to configure several output formatting options. The following example is the best way to summarize the most used of them, with their default values:
@@ Line 58: / Line 58: @@
      });
 </pre>
-Another way for it is by using the [http://docs.fckeditor.net/ckeditor_api/symbols/CKEDITOR.html CKEDITOR] object, so all editor instances will be changed:
+Another way for it is by using the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html CKEDITOR] object, so all editor instances will be changed:
 <pre>CKEDITOR.on( 'instanceReady', function( ev )
+     {