HTML Output Formatting
CKEditor 4 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 different results for each one of them.
# The HTML Output Writer
The HTML Output Writer plugin makes it possible to generate advanced output formatting with CKEditor 4.
The writer is used by the CKEDITOR.htmlDataProcessor class to write output data.
The current writer for a specific editor instance can be retrieved with the editor.dataProcessor.writer property.
It is possible to configure several output formatting options by setting the writer properties. The following example summarizes the most common properties and gives their default values:
var writer = editor.dataProcessor.writer;
// 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';
// The writing rules for the <p> tag.
writer.setRules( 'p', {
// Indicates that this tag causes indentation on line breaks inside of it.
indent: true,
// Inserts a line break before the <p> opening tag.
breakBeforeOpen: true,
// Inserts a line break after the <p> opening tag.
breakAfterOpen: true,
// Inserts a line break before the </p> closing tag.
breakBeforeClose: false,
// Inserts a line break after the </p> closing tag.
breakAfterClose: true
} );
# Setting Writer Rules
Since the writer is a property of each editor instance and also due to its dependency on the HTML Output Writer plugin to be loaded, the best way to modify it is by listening to the event-instanceReady
event, so it is safe to assume that the dataProcessor
property will be loaded and ready for changes. The following code shows an example of this approach used 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 solution is to use the CKEDITOR
object which will cause all editor instances to be changed:
CKEDITOR.on( 'instanceReady', function( ev ) {
// Ends self-closing tags the HTML4 way, like <br>.
ev.editor.dataProcessor.writer.selfClosingEnd = '>';
});
# Adjusting Output Formatting Through Configuration
Numerous configuration options let you tweak CKEditor 4 behavior without touching the writer, including:
- Entities support:
- White space usage:
- Handling block elements:
autoParagraph
(deprecated)fillEmptyBlocks
ignoreEmptyParagraph
- HTML encoding:
# HTML Output Formatting Demo
See the working “HTML Output Formatting” sample that showcases how to control HTML output produced by CKEditor 4.
# Related Features
See the Source Code Editing feature that lets the users edit raw HTML source of the editor content directly in CKEditor 4.