Question

我正在使用最新版本的CKEditor（日期为4.7）和标准软件包，我希望能够强制它保留换行元素（<br>）。

我试图使用以下配置，但没有成功：

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

正如您可以看到in this jsfiddle，当您打开“来源”模式时，<br>代码已替换为 。

你是如何实现这一目标的？

Answer 1

此CKEditor ticket上提供了一种解决方法（或至少部分解决方法），强制CKEditor保留<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

编辑：您可能还想查看我的other answer，这可能会根据您的需要更好地运作。

Answer 2

据报道，CKeditor的开发人员告诉 br to nbsp 自动转换不是问题，而是CKeditors规范事物的方法。

它不会给你带来任何问题。因此，您无需担心 br 标记转换为 nbsp 浏览following link了解更多信息。

如果您希望从源代码中移除＆amp; nbsp，请选择以下方法：

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

Answer 3

我想我找到了一个更好的答案，它可以在更多情况下起作用：介绍＆＃34; brangel＆＃34;插件：

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

我们的想法是在CKEditor的过滤阶段发生之前，通过暂时用一些占位符文本（<br>）替换它们来保存{cke_br}元素免遭破坏（请参阅toDataFormat和{{ 3}}}事件），然后在最后恢复它们。这对用户来说都是透明的。

toHtml

如何强制CKEditor保留<br/>标签

3 个答案: