How to force CKEditor to save tags

Question

I am using the latest version of CKEditor (4.7 for today) with a standard package, and I want it to be able to save its line break elements ( <br>).

I tried using the following configuration without success:

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

As you can see in this jsfiddle , when opening the source mode, the tags <br>were replaced with  .

How do you achieve this?

Answer 1

There was a crawl in this CKEditor ticket (or at least a partial workaround) , which forces CKEditor to save the tags <br>:

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: , , .

Answer 2

CKeditor , br nbsp , CKeditors - .

. , br, nbsp .

& nbsp , :

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

Answer 3

, , : "brangel":

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 keep the elements <br>from being destroyed by temporarily replacing them with some placeholder text ( {cke_br}) before the CKEditor filtering step occurs (see toDataFormat and toHtml events, and then restore them at the end. All this is transparent to the user .

Updated fiddle here .