How to force CKEditor to preserve <br> tags

Question

I am using the latest version of CKEditor (4.7 to date) with the standard package, and I want to be able to force it to preserve line break elements (<br>).

I have attempted to use the following config, without success:

CKEDITOR.replace('ck', {
    allowedContent: true,
    enterMode: CKEDITOR.ENTER_BR
});

As you can see in this jsfiddle, when you open Source mode, <br> tags have been replaced with a  .

How do you achieve that?

Answer 1

A workaround (or at least partial workaround) was given on this CKEditor ticket, which forces the CKEditor to preserve <br> tags:

editor.on( 'pluginsLoaded', function( evt ){
    evt.editor.dataProcessor.dataFilter.addRules({
        elements :{
            br : function( element ) {          
                //if next element is BR or <!--cke_br_comment-->, ignore it.
                if( element && element.next && ( element.next.name == 'br' || element.next.value == 'cke_br_comment' ) ){
                    return;
                }else {
                    var comment = new CKEDITOR.htmlParser.comment( 'cke_br_comment' );
                    comment.insertAfter( element ); 
                }
            }
        }
    });

evt.editor.dataProcessor.htmlFilter.addRules({
    comment : function( value, node ) {
        if( value.indexOf('cke_br_comment') >= 0 ) {
            return false;
        }
    }
});

Updated fiddle here.

EDIT: you might also want to check my other answer which may work better depending on your needs.

Answer 2

The developers of CKeditor have reportedly told that br to nbsp auto conversion is not an issue but CKeditors ways of normalizing things.

It wont create any problem for you. So, you need not worry about your br tags being converted to nbsp Go through the following link for more.

If you wish to remove the &nbsp from the source code, One way if to include the following :

 basicEntities: false,
 entities_additional: 'lt,gt,amp,apos,quot'

Answer 3

I think I have found a better answer which will work in more cases: introducing the "brangel" plugin:

CKEDITOR.plugins.add('brangel', {
    init: function (editor) {
        editor.on('toHtml', function( evt ) {
            protectBRs(evt.data.dataValue);
        }, null, null, 5);
        editor.on('toHtml', function( evt ) {
            unprotectBRs(evt.data.dataValue);
        }, null, null, 14);
        editor.on('toDataFormat', function( evt ) {
            protectBRs(evt.data.dataValue);
        }, null, null, 5);
        editor.on('toDataFormat', function( evt ) {
            unprotectBRs(evt.data.dataValue);
        }, null, null, 14);

        function protectBRs(element) {
            var children = element.children;
            if (children) {
                for (var i = children.length; i--; ) {
                    var child = children[i];
                    if (child.name == "br") {
                        var placeholder = new CKEDITOR.htmlParser.text('{cke_br}');
                        placeholder.insertAfter(child);
                        child.remove();
                    } else {
                        protectBRs(child);
                    }
                }
            }
        }

        function unprotectBRs(element) {
            var children = element.children;
            if (children) {
                for (var i = children.length; i--; ) {
                    var child = children[i];
                    if (child instanceof CKEDITOR.htmlParser.text && child.value === "{cke_br}") {
                        var br = new CKEDITOR.htmlParser.element('br');
                        br.insertAfter(child);
                        child.remove();
                    } else {
                        unprotectBRs(child);
                    }
                }
            }
        }
    }
});

The idea is to save the <br> elements from destruction by temporarily replacing them with some placeholder text ({cke_br}) before the filtering phase of the CKEditor occurs (see toDataFormat and toHtml events), and then restore them back at the end. This is all transparent to the user.

Updated fiddle here.