Trumbowyg: IE11 Paragraph and shift+Enter bug

Created on 14 Jul 2016  路  6Comments  路  Source: Alex-D/Trumbowyg

Hi,

I'm using Trumbowyg in a couple of my projects. Really like it so far. Today I discovered a weird bug in Internet Explorer 11. I thought it was a bug in my project, so I tested it on the demo-page of Trumbowyg, and got the same result.

How to reproduce the bug?

  1. Type something in the editor on: http://alex-d.github.io/Trumbowyg/ using IE11 on Windows platform.
  2. Press 'Enter'
  3. The cursor jumps to the next paragraph, and immediately jumps back up. When you start to type the text does start on the new paragraph. (but this is weird behaviour).
  4. When you use Shift + Enter to make a line-break the editor makes a new paragraph (this is a bug).
  5. When you type a couple of Enters after each other, the cursor keeps jumping back up.

    Informations

Browser: IE11
OS: Windows 8

question

Most helpful comment

I noticed the following. If you don't use the semantic version, this bug doesn't appear.
semantic: false,
Hope this helps you

All 6 comments

I know. But it's IE... some stranges/weird behaviours are from IE itself :/

When you type a couple of Enters

I don't want cover this use case, that I judge non-semantic.

So this won't be fixed? It's quite a breaking bug right now for the project I'm using it in. Please let me know if this will be on the buglist, otherwise I need to look for an alternative plugin. Thanks!

Idk how to fix it. So you can check another WYSIWYG... :/

Too bad, thanks for your effort though :+1:
Will try to find an alternative.

Even though, this issue is already closed, i want to make some notes about it.
The cause of the problem is the following code fragment:

// Remove empty <p>
t.$ed.find('p:empty').remove();

In Chrome, the css selector p:empty doesn't select a <p> tag with a <br> tag inside, but in IE it does. To prevent __trumbowyg__ from deleting <p> tags with a <br> tag inside also for IE, the code could rewritten like this:

// Remove empty <p>
t.$ed.find('p:empty').each(function () {
  var p = $(this);
  if (p.html() !== '<br>') {
    p.remove();
  }
});

I noticed the following. If you don't use the semantic version, this bug doesn't appear.
semantic: false,
Hope this helps you

Was this page helpful?
0 / 5 - 0 ratings

Related issues

akupiec picture akupiec  路  4Comments

vasileioslaios picture vasileioslaios  路  5Comments

DirkOlten picture DirkOlten  路  3Comments

Tiogshi picture Tiogshi  路  5Comments

neerajjoshi picture neerajjoshi  路  4Comments