Question

Inline模式下的CKEditor在初始化时将文档源中的<br>添加到空div。当您在CKEditor中检查源时，它显示为完全空。我想这样做是为了停止折叠div或其正在编辑的任何元素，但对我来说这会导致问题，因为我使用CSS定位空div以显示占位符。

关于如何禁用此功能我到处都搜索过，多年前看过FireFox的一些问题，但这似乎是无关的。

<div id="editarea" placeholder="Title"></div>
CKEDITOR.inline('editarea, {});

<style>
  div:empty:after {
    content: attr(placeholder);
  }
</style>

当您查看开发人员工具时，文档的来源如下：

<div id="editarea" placeholder="Title">
   <br>
</div>

在配置中添加以下内容似乎没有做任何事情：

config.fillEmptyBlocks = false;

Answer 1

<br>是“填充”，并且始终按功能createBogusAndFillerRules将输入（编辑器初始化）放置到空块元素中给元素一个高度，以便用户点击它来编辑它。

实际上没有CKeditor配置来避免这种行为，但是，使用jQuery，我们可以删除<br>上的instanceReady.ckeditor事件：

if($(this).html().trim() === '<br>'){
    $(this).html('');
}

Answer 2

我找到的解决方案可以通过编辑器事件侦听器帮助其他人：

// Ckeditor 4
editor.on('key', function (evt) {
  var selection = editor.getSelection();
  var element = selection.getStartElement();
  var html = element.getHtml();
  var id = element.getId();
  if (evt.data.keyCode !== 13
     && id === 'editarea')) {
     if (html.match(/(&nbsp;)?<br>$/)) {
        element.setHtml('');
     }
  }
})

Answer 3

请试试这个对我有用的代码：

用于在加载时移除 br

$('your_id').ckeditor();    
        CKEDITOR.on('instanceReady', function() { 
            $('div.application').find('br').remove();   // remove br tag added on empty divs
        });

用于删除在销毁函数中使用它：

for(CKname in CKEDITOR.instances) // delete multiple instances of ckeditor
        {
            CKEDITOR.instances[CKname].destroy(function(){
                $("your_id").html(function (i, html) {
                    return html.replace(/&nbsp;/g, ''); // remove &nbsp;
                });
            })
        }

内联CKEditor在启动

3 个答案: