[IE11] Extra paragraphs added when showing/hiding divs with CKEditor

[Wiktor Walc]

• This is an IE11 bug: ​https://connect.microsoft.com/IE/feedback/details/864804/ie11-contenteditable-br-elements-appended-to-body-when-showing-hiding-iframe-with-editable-document-inside
• See comment:16 for more details, including possible workarounds.

---

Extra paragraphs added when switching between tabs.

In IE 11, when using two tabs (using jQuery UI), one with CKEditor and one with plain text, whenever user switches to a tab with CKEditor and back, an additional paragraph is added at the end of content.

Content after a couple of switches:

<p>Magical ponies await</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;
<p>&nbsp;
<p>&nbsp;</p>
</p>
</p>

[Wiktor Walc]

The attached file contains the sample and all required files to reproduce it.

[Joel]

Add CC

[Jakub Ś]

After latest update in my Win 8.1 preview (IE11 11.0.9431.228) I wasn't able to reproduce this.

I have also tried this issue on Win7 (IE11 11.0.09600.16476) and was able to reproduce both of these problems.

[Piotrek Koszuliński]

I couldn't reproduce any problem on IE11_bug.html​, but when switching tabs in 11342.zip​ new paragraphs are added below text. I'm checking this on IE11.0.9600.16476.

[Joel]

Anyone test on IE10?

[Piotrek Koszuliński]

We'll try to investigate this issue for CKEditor 4.3.3. Although, I don't have any idea yet whether it's something serious or whether the fix will be possible now.

[Ole K]

Hi,

I noticed when setting "config.enterMode = CKEDITOR.ENTER_BR;" it does not seem to happen.

But then I get some "<br />" at the end of the document...

That is how i have configured it:

config.coreStyles_italic = { element : 'i', overrides : 'em' }; config.enterMode = CKEDITOR.ENTER_BR; config.autoParagraph = false; config.fillEmptyBlocks = false;

And I have to really clear the IE11 cache every time... But thats maybe because of my ASP.NET project

As a workaround for ASP.NET i have added the following lines to CKEditorControl.cs:

public override string Text
{
    get
    {
        return base.Text;
    }
    set
    {
        // Ole: clean up some stuff before saving
        value = System.Text.RegularExpressions.Regex.Replace(value, @"(<br /><br />&nbsp;)$", "");
        value = System.Text.RegularExpressions.Regex.Replace(value, @"<p>&nbsp;<p>&nbsp;<p>&nbsp;</p></p></p>$", "");
        // optionally clean all empty paragraphs
        value = System.Text.RegularExpressions.Regex.Replace(value, @"<p>&nbsp;</p>", "");

        base.Text = value;
    }
}

[Jani Ollikainen]

I'm seeing this also. And can reproduce it with that IE11_bug.html.

Version: 11.0.9600.17041 Update Versions: 11.0.7 (KB2929437)

In my environment this is kind of nasty bug which is really annoying. Would appreciate lower milestone as 4.4.1.

[Jani Ollikainen]

If the editor is in source mode, then no extra paragraphs are added.

[Piotrek Koszuliński]

Unfortunately this turned out to be an ugly IE11 bug. It can be reproduced without CKEditor. Download 11342_3.html​ and 11342_editable.html​ and open the first sample. Then open console and press show/hide few times. You'll see <br> appended and removed. What's funny, showing "editor" appends 2 <br>s when hiding removes one.

I can't think of any reasonable hack we could implement. We don't know the source of those <br>s, so we cannot arbitrarily remove them. However, you can implement a workaround - after showing editor just remove any <br> which is a direct descendant of editable. That's it.

Also, note that this issue cannot be reproduced on inline editor (see 11342_2.html​), so you could also use the ​divarea.

[Piotrek Koszuliński]

I reported a bug on IE's bug tracker: ​https://connect.microsoft.com/IE/feedback/details/864804/ie11-contenteditable-br-elements-appended-to-body-when-showing-hiding-iframe-with-editable-document-inside