15

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?

5 Answers 5

29

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.

1
  • 1
    Looks like this answer is continuing to help 4 years later. Maintaining an old system and needed this to solve an issue with tags ^^.
    – Xrylite
    Jul 22, 2015 at 18:43
14

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.

1
  • Thank you so much for this. It's been one of those things about the CKEditor that has annoyed me so much and I never knew how to change it. I have no clue who would want a newline and indent inside a p tag :)
    – Gazillion
    Aug 5, 2010 at 13:43
1

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.

1

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.