Kendo Editor Dynamic Link onClick Function Not Working

Question

I have a custom toolbar which inserts a link in kendo editor. I am trying to put a onClick function in that link but when the dynamically inserted link is clicked it says function is not defined. I also tried it by putting a class on that link and have a click function to that class but it does not get hit.

Any help would be much appreciated.

$("toolbarSubmitBtn").("click", function () {
    var value = $("toolbarInput").val();

    var $html = '<a onClick="myFunction()"> Click to show alert </a>';
    //var $html = '<a class="functioncall"> Click to show alert </a>';
    var $empty = $("<div>").append($html)
    $("#editor").data("kendoEditor").paste($empty.html());
});

Class Call

$(document).on("click", ".functioncall", function () {
    alert("function called from class");
});

Function Call

function myFunction() {
    alert("function called by click");
}

Answer 1

I believe the issue is that the Kendo Editor puts the body content within an IFRAME and your "myFunction" is not within that IFRAME. Try setting the onClick to

window.parent.myFunction();


$("#toolbarSubmitBtn").on("click", function () {
    var $html = '<a href="#" onClick="window.parent.myFunction();" contenteditable="false"> Click to show alert </a>';          
    $("#editor").data("kendoEditor").paste($html);
});

Optionally, set contenteditable="false" on your inserted link to prevent user editing the link text.

Here is a DEMO