Detect igHtmlEditor Content Changes in Ignite UI for jQuery

I looked in the docs and couldn’t find any information on any event signalling a change to the contents.

I then looked in the source and found the text area and tried hooking to the change event. This doesn’t appear to fire.

How do I detect any change to the html editor?

Hi,

There is "isDirty" method, but I don't think that this is what you're looking for. This method shows if the content is changed since the creation of the widget.

One way to listen for a change is to bind to keypress event of the editor. Editor itself is rendered as IFRAME so you should bind to the IFRAME's document.

Here is the sample code:

Code Snippet

1. $.ig.loader(function () {
2.     var editorIdSelector = "#htmlEditor";
3.     $(editorIdSelector).igHtmlEditor({
4.         width: "100%"
5.     });
6.     var workspace = $(editorIdSelector + "_editor");
7.     $(workspace[0].contentWindow.document).bind("keypress", function (e) {
8.        // your code here
9.     });
10. });

 

Best regards,

Martin Pavlov

Infragistics, Inc.

This doesn't handle toolbar changes, copy/paste/cut or undo/redo either.

Given that this should affect the source textarea why doesn't the change event fire?

In any event (sorry for the unintentional pun) there needs to be a changed event on the html editor. It's the only one that doesn't have a change event, and it prevents data binding from working.

Hi,
If you want to handle toolbar changes then you can bind to actionExecuted event. This action fires for all items in the toolbars.
TEXTAREA change event is not firing because this event fires on blur or focusout events for most of the browsers and in our case the TEXTAREA is hidden.

Sorry, but I couldn't understand your last paragraph. Are you proposing to add change event for the igHtmlEditor?
What data binding are you trying to achieve?

Hope this helps,
Martin Pavlov
Infragistics, Inc.

Yes, I'm proposing that every control should have a change event.

And that every control should update it's value and respond to changes from the root element that the control was created from.

The change event is required to get around the second issue because knockout cannot bind directly to these controls (only in the grid). It's also required to know if there has been a change to the content of the page for dynamic presentation of save buttons or a warning that navigating away from the page will lose changes etc.

The second part is the most important because right now Knockout and every other mvvm/mvc library will not work with your controls which causes major issues and spaghetti code.

Also on this I got the keypress to work, but couldn't get blur to work. Ideas?

n/m

This works:

var frame = $("iframe", element).get(0);
$(frame.contentWindow).blur(function (e) {
value($(element).igHtmlEditor("getContent", "html"));
});

Where element is the dom elment that is the igHtmlEditor.

Still need a changed event for this and every other control so that it can be properly bound in every case for knockout and every other mvc or other environment.

(and every control needs to respond to and update the underlying input control that it was created from so that the value binding works on knockout and every other mvc/mvvm environment.