CKEditor Adds a New Line & Tab - The 'Bug' Fix
After I replaced the outdated FCKEditor on one of our company sites with CKEditor, there was an annoying problem that kept happening with the output HTML. The editor was adding a new line and a tab for every HTML element, thus making the source look like crap! Here is the solution I used to fix this.
Using CKEditor version 3.6.2. This is what the source would always look like after it came out of the editor...
<h2>
Maecenas adipiscing suscipit mollis.</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>Instead I wanted it to look like this:
<h2>Maecenas adipiscing suscipit mollis.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>The Solution
I fixed this on Drupal, so I adjusted a different file (since there is a module out for this). In Drupal you can do this in the /sites/all/modules/ckeditor/ckeditor.config.js file or for just CKEditor users this is done in the /ckeditor/config.js file.
This is the code you need for a p and h1 tags (as you can tell this code is duplicated for every element that you do not wish to have a tab and a space for):
CKEDITOR.on( 'instanceReady', function( ev )
{
ev.editor.dataProcessor.writer.setRules('p', {
indent : false,
breakBeforeOpen : true,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : true
});
ev.editor.dataProcessor.writer.setRules('h2', {
indent : false,
breakBeforeOpen : true,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : true
});
});It needs to go here, right after the editorConfig instance:
CKEDITOR.editorConfig = function( config )
{
// Your CKEditor configuration is here
};
// PASTE HERE