CODEWITHSUNDEEP
javascriptckeditor
Bastiaan
Bastiaan

Reputation: 736

Inline CKEditor adds <br> to empty div on startup

CKEditor in Inline mode adds a <br> in the source of the document to an empty div when it is initialized. When you check the source in CKEditor it shows completely empty. I guess this is done to stop collapsing the div or whatever element it is editing on, but for me this is causing issues since I target the empty div with CSS to display a placeholder.

I have searched about everywhere on how to disable this and have seen some issues with FireFox many years ago, but that seems to be unrelated.

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

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

When you look in the Developer Tools the source of the document looks like:

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

Adding the following to the config does not seem to be doing anything:

config.fillEmptyBlocks = false;

Upvotes: 2

Views: 1189

Answers (3)

sagar
sagar

Reputation: 94

Please try this code it is working for me:

For removing br on load

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

for removing &nbsp use this in destroy function:

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

Upvotes: 0

Mickael Drymon
Mickael Drymon

Reputation: 31

Can help someone else, the solution I found, pass by the editor event listener:

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

Upvotes: 3

Webian.it
Webian.it

Reputation: 450

That <br> is a "filler" and is always placed at input (editor initialization) into empty block elements by function createBogusAndFillerRules to give an height to the element so the user can click on it to edit it.

Actually there is not a CKeditor configuration to avoid this behaviour but, using jQuery, we can remove the <br> on instanceReady.ckeditor event with:

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

Upvotes: 0

Related Questions