Kendo Editor on <textarea> creates iframe, so cant bind any javascript events inside it

Question

In my application I use Kendo editor and initialize it on <textarea> element like this:

<textarea id="foo"/>
$("foo").kendoEditor();

now when I look at generated html for the same it makes an iframe for editor area like this:

<iframe src='javascript:""' frameborder="0" class="k-content">

Now I want to bind the click (and some more) events for the elements inside this IFrame but it doesn't work as the iframe is dynamically generated.

Kendo Editor provides some events like "Select", "KeyUp", "KeyDown" but I want more events like click etc.. So how can I accomplish that?

I have already tried jQuery on event on .k-content class but it can't help..

Answer 1

You can get the body element of the editor and bind events there:

$("#foo").kendoEditor();

var editor = $("#foo").data("kendoEditor");

$(editor.body).click(function() {
  alert("click");
});

Here is a live demo: http://jsbin.com/eLAjofA/1/edit