'keyup' method not being called correctly with wysihtml.

[jengel3]

I have code such as:

    $(text).keyup(function() {
      console.log("called");
      updateCountdown(text, countdown, chars);
    });

which I use to count characters in a text box. However, once adding the 'wysihtml5' class to the textbox, it is no longer called, even though it worked perfectly fine without it. Is it possible that wysi is intercepting this regular method, and not dispatching a new one?

[kasoban]

I guess you figured this out yourself since you closed the ticket, but let's explain this for anyone stumbling upon this through a search:

The event handlers on the textbox will not get called due to wysihtml creating a contenteditable iframe copied from the textbox attributes and hiding the actual textbox, so there won't be actual user input to the textbox.

[jengel3]

I actually ended up submitting this to the wrong version of wysi, but they are fairly similar, and I'd be willing to use any version that I can get to work properly. How would I go about tracking user input instead of the way I'm doing it now?

[kasoban]

Well, you submitted it to Waxolunist/bootstrap3-wysihtml5-bower which is effectively based on this fork.
Anyway, to access the editor you can do the following:

After you initialized the editor on an element by calling element.wysihtml5(), the initialized editor is stored as a data field for that element. So you can get a hold of it through element.data('wysihtml5').editor for example, if you have jQuery available. From there on you could apply a listener like element.data('wysihtml5').editor.on('change', function() {doSomething;}) or the like.

Here is a list of events exposed by the editor:
https://github.com/xing/wysihtml5/wiki/Events
At the very bottom there is an example for a keydown listener.

[priithaamer]

The event system in wysihtml5x needs an overhaul as the change event does not work properly. Until then we're using a combination of change event listeners and mutation observers to get proper events about changes in editable element. Please note that the following works when using contentEditable version of wysihtml. I have not tested it with iframes:

var el = document.getElementById('editor'),
  editor = new wysihtml5.Editor(el, {});

var handleContentMutation = function(mutations) {
  var mutation = _.some(mutations, function(mutation) {
    return !(mutation.type == 'attributes' && mutation.target == el);
  });

  if (mutation) {
    // It is advised to defer the invocation of this method here, i.e. by
    // using _.defer() from Underscore
    handleContentChange();
  }
}

var handleContentChange = function() {
  // Well, content has been changed now...
};

el.addEventListener('input', handleContentChange);

// Listen for change events on editor in case MutationObserver is not present.
editor.addEventListener('change', handleContentChange);

if (window.MutationObserver) {
  var observer = new MutationObserver(handleContentMutation);
  observer.observe(el, {attributes: true, childList: true, characterData: true});
}