Output Formatting"

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

(Article & codes formatted)
Line 2: Line 2:
  
 
== The HTML Writer  ==
 
== 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.  
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:  
 
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">
 +
var writer = editor.dataProcessor.write;
  
 
// The character sequence to use for every indentation step.
 
// The character sequence to use for every indentation step.
 
writer.indentationChars = '\t';
 
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.
 
// The character sequence to be used for line breaks.
 
writer.lineBreakChars = '\n';
 
writer.lineBreakChars = '\n';
  
// Set writing rules for the &lt;p&gt; tag.
+
// Set writing rules for the <p> tag.
 
writer.setRules( 'p',
 
writer.setRules( 'p',
 
     {
 
     {
 
         // Indicates that this tag causes indentation on line breaks inside of it.
 
         // 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  ==
 
== 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',
 
                 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">
 +
CKEDITOR.on( 'instanceReady', function( ev )
 
     {
 
     {
         // 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>

Revision as of 11:52, 13 January 2011

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 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:

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 <br />.
writer.selfClosingEnd = ' />';

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

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

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

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

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

        // Insert a line break after the </p> closing tag.
        breakAfterClose : true
    });

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:

CKEDITOR.replace( 'editor1',
    {
        on :
        {
            instanceReady : function( ev )
            {
                // Output paragraphs as <p>Text</p>.
                this.dataProcessor.writer.setRules( 'p',
                    {
                        indent : false,
                        breakBeforeOpen : true,
                        breakAfterOpen : false,
                        breakBeforeClose : false,
                        breakAfterClose : true
                    });
            }
        }
    });

Another way for it is by using the CKEDITOR object, so all editor instances will be changed:

CKEDITOR.on( 'instanceReady', function( ev )
    {
        // Out self closing tags the HTML4 way, like <br>.
        ev.editor.dataProcessor.writer.selfClosingEnd = '>';
    });