onChange event doesn't work in IE11

[yeahsmaggy]

The onChange setting works in Chrome but doesn't work in IE 11.

[Xstoudi]

The question is "what works with IE"...

[johnw86]

Looks to work fine for me, the arrow function in the example will not work as IE does not support them. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

But changing the code to a standard function expression works fine.

onChange: html => console.log(html), to onChange: function(html){ console.log(html) }

[yeahsmaggy]

Fair points above. I think it would be wise to put the more compatible version in the demo code. Although I figured it out myself and learnt something. In any case, I successfully implemented use of the editor in my application. Thanks.

[johnw86]

Actually looking into this further as I just noticed an issue with IE11 on my implementation. It is actually an issue even once you change to the function expression as the onChange event is never triggered.

This is because IE does not support input change on contenteditable items. https://developer.mozilla.org/en-US/docs/Web/Events/input

I have made a simple code change to detect IE and change the event listener based on this. I doubt @jaredreich would want this added IE fix in the master branch so have added the code below for anyone else who needs IE11 support.

You need to replace the code which watches for content changes:

content.oninput = function (_ref) { ... };

with:

const inputEventType = /Trident/.test(navigator.userAgent) ? 'textinput' : 'input'; content.addEventListener(inputEventType, function(_ref) { ... });

[yeahsmaggy]

I think my way around it was was not using the onChange feature in fact hence above answer may have been helpful.

[johnw86]

Even when using the 'textinput' event that will not solve all issues as any changes triggered from the editor buttons will not trigger a change.

I have needed to add a fair amount of custom code to get the change event working.

[jaredreich]

I think I see this as a plugin opportunity rather than a bug. The whole point of pell is to remain insanely small by forgetting about stupid browser differences that will go away in the future anyways.

However, IE is of still used quite a lot in the wild... so I do think it's worth my time to make an IE plugin.

[mikezukerman]

Is there any update on this? The onChange event isn't working in IE for me, even with the standard function expression syntax.

Thanks!

[jaredreich]

@mikezukerman The issue is still open, so no update from me yet. This will probably be part of a future 2.0 release that allows plugins. Or maybe IE usage will be down to 0% by that time? Haha.

[matChojecky]

For now I used MutationObservers specially for IE11 checking for Trident in UA and well it sure is not the most beautiful but at least it works, so to pell-content node I attach something like this:

var pellObserver = new MutationObserver(function() {
    var html = document.querySelector('.pell-content').innerHTML; // this is html content
    // do your stuff
});
 pellObserver.observe(document.querySelector('.pell-content'),
    { characterData: true, attributes: false, childList: true, subtree: true });

[MadMax888]

Could you check this solution, @jaredreich ? Similar to @matChojecky comment. I saw it when the pr was created https://github.com/jaredreich/pell/pull/135

[ddoria921]

@jaredreich I suggest removing the IE 9+ support from the README since it's not supported at the moment and it's not planned on being fixed (at least without a plugin or v2.0)