Removing unwanted newline characters when adding <p> in CKEditor

Question

When loading content with a set of paragraphs in CKEditor, it replaces my <p> tags with <p>&#x9;

That means the editor converts this:

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

into what ends up like this:

<p>
   paragraph 1</p>
<p>
   paragraph 2</p>
<p>
   paragraph 3</p>

How do I fix it so that CKEditor doesn't add the extra newline characters when it sees the paragraph tags?

Answer 1

Add this line to the ckeditor.js configuration file:

n.setRules('p',{indent:false,breakAfterOpen:false});

More about the formatting of the HTML Writer can be found in Developers Guide: Output Formatting at CKSource Docs.

Answer 2

Elsewhere (my apologies that I did not make a note of where I got it from.), I found code to fix this problem for all the block-level tags. For my project, the extra new-lines were a problem due to outputting to XML and importing into other applications as CDATA.

So, in my ckeditor_config.js file, after the CKEDITOR.editorConfig function, I put in this:

CKEDITOR.on('instanceReady', function( ev ) {
  var blockTags = ['div','h1','h2','h3','h4','h5','h6','p','pre','li','blockquote','ul','ol',
  'table','thead','tbody','tfoot','td','th',];

  for (var i = 0; i < blockTags.length; i++)
  {
     ev.editor.dataProcessor.writer.setRules( blockTags[i], {
        indent : false,
        breakBeforeOpen : true,
        breakAfterOpen : false,
        breakBeforeClose : false,
        breakAfterClose : true
     });
  }
});

Some of those elements may not need this treatment; obviously the blockTags array can easily be edited to your needs.

Answer 3

I believe there's a setting to format the code, or auto-indent or something along those lines. It was intended to make the source code more readable. It's effectiveness is open to opinion I guess.

Answer 4

If you are like me and would like to do it at instance level and don't want to touch the configuration files so that it is easy to update/upgrade. Then here is another solution.

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
                });
        }
    }
});

Reference: Output Formatting

Answer 5

Best solution that would work like a charm:

edit contents.css file and setting style for paragraphs e.g.

 p {
     margin-top:0px;
     margin-bottom:5px;
 }