内联 CKEditor 在启动时将 添加到空 div答案

【问题标题】：Inline CKEditor adds to empty div on startup内联 CKEditor 在启动时将 添加到空 div
【发布时间】：2017-06-26 13:33:36
【问题描述】：

内联模式下的CKEditor在初始化时将文档源中的 添加到空的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;

【问题讨论】：

虽然它不应该引起大问题，但也许这会有所帮助 ► docs.cksource.com/ckeditor_api/symbols/…
@Fran，更新了答案，也删除了戏剧化 :) FillEmptyBlocks 不起作用

标签： javascript ckeditor

【解决方案1】：

可以帮助别人，我找到的解决方案，通过编辑器事件监听器传递：

// 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('');
     }
  }
})

【讨论】：

【解决方案2】：

  是一个“filler”并且总是通过函数createBogusAndFillerRules 放置在输入（编辑器初始化） 到空块元素中，以给出高度元素，以便用户可以单击它进行编辑。

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

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

【讨论】：

【解决方案3】：

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

用于在加载时删除 br

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

要删除 &nbsp，请在销毁函数中使用：

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

【讨论】：