When loading content with a set of paragraphs in CKEditor, it replaces my <p>
tags with <p>	
That means the editor converts this:
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3&l开发者_如何学Ct;/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?
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.
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.
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.
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
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;
}
精彩评论