Binding to the "paste" event never fires the first time, only on subsequent pastes

[Dean Wise]

I've bound the event, and tried the pre-initialization and post-initialization binding :

(post initialization snippet)
editor.bind("paste", function(e) {
e.html = unescape(e.html);
});

However, the function only fires the second time that I paste a value into the editor.

Any suggestions would be appreciated.

Dean Wise

[Alex Gyoshev]

Hello Dean,

We could not reproduce the problem in the editor events demo, which is bound to the paste event. Can you please provide more details about the issue?

All the best,
Alex Gyoshev
the Telerik team

[Dean Wise]

Hmm, not sure exactly what to include, so let me know if you need anything additional. Basically, we are doing the MVVM style binding on the Editor control (textarea html):

<textarea id="Body" name="Body" rows="10" cols="30" data-role="customeditor"
data-tools='[{name:"bold" },{name:"italic"},{name:"underline"},{name:"strikethrough"},{name:"fontName"},{name:"fontSize"},{name:"foreColor"},{name:"backColor"},{name:"customJustifyLeft",exec:customJustifyLeft},{name:"customJustifyCenter",exec:customJustifyCenter},{name:"customJustifyRight",exec:customJustifyRight},{name:"justifyLeft"},{name:"justifyCenter"},{name:"justifyRight"},{name:"justifyFull"},{name:"customUnorderedList",exec:customUnorderedList},{name:"insertUnorderedList"},{name:"customOrderedList",exec:customOrderedList},{name:"insertOrderedList"},{name:"indent"},{name:"outdent"},{name:"customInsertLink",exec:customInsertLink},{name:"createLink"},{name:"unlink"},{name:"insertImage"},{name:"viewHtml"},{name:"insertToken",tooltip:"Insert Token",exec:insertToken},{name:"insertStaticTable",tooltip:"Insert Static Table",exec:insertStaticTable},{name:"insertRepeatingTable",tooltip:"Insert Repeating Table",exec:insertRepeatingTable},{name:"customTemplate",template:$("#backgroundColor-template").html()},{name:"saveTemplate",tooltip:"Save Template",exec:saveTemplate}]'
data-bind="value: Job.Body, contentEditable: JobStatus.IsModifyable" style="width: 1000px; height: 400px; margin-top: 10px; font-family: Arial,Helvetica,sans-serif; font-size: x-small">
</textarea>

And here is the document.ready function that binds the controls and adds the "paste" event binding:

$(function() {
// Fix for kendo upload widget issue in IE (attempts a call to getAttribute method of document obj but it does not exist)
if (!document.getAttribute)
document.getAttribute = function(x) { return $(document).attr(x); };

viewModel = buildViewModel(@(Html.Raw(Json.Encode(Model))));
var decoded = $($("<div></div>").html(viewModel.Job.Body).text());
decoded.find("a").attr("target", "_blank");
viewModel.Job.Body = $("<div/>").append(decoded).html();
viewModel.bind("set", function(e) {
if (e.field == "Job.Sensitivity") {
var me = this;
var type = e.value;

if (!this.validateSensitivity(type)) {
e.preventDefault();
return;
}

// By default Kendo DropDown lists bind the entire object's value to the view model on change
// This handler is responsible for overriding this behavior, to only bind the value defined in the data-value-field attr
if (type.Name !== undefined) {
e.preventDefault();
me.set(e.field, type.Name);
}
}
if (e.field == "Job.FromAddress") {
if (e.value.length == 0)
this.set("Job.FromName", "");
}
});

viewModel.setPendingChanges(true);
kendo.bind($("#correspondence-container"), viewModel);

$("#fileUpload").data("kendoUpload").wrapper.find(".k-button").addClass("viewHtml-submit");
$("#correspondence-container").on("change", "#ddlTemplate", applyTemplate);
var editor = $("#Body").data("kendoCustomEditor");
editor.setOptions({
imageBrowser: {
transport: {
read: '@Url.Action("Read", "ImageBrowser")',
destroy: {
url: '@Url.Action("Destroy", "ImageBrowser")',
type: "POST"
},
create: {
url: '@Url.Action("Create", "ImageBrowser")',
type: "POST"
},
thumbnailUrl: '@Url.Action("Thumbnail", "ImageBrowser")',
uploadUrl: '@Url.Action("Upload", "ImageBrowser")',
imageUrl: viewModel.ImageUploadUrl
}
}
});


$(editor.document).find("head").append(kendo.format("<style>.{0} td, .{0} th {border: dashed 1px black !important;}", editor.CLASS_REPEATING_TABLE));

editor.bind("paste", function(e) {
e.html = unescape(e.html);
});

//debugger;
if (editor.value().length == 0) {
editor.exec("fontName", { value: "Arial,Helvetica,sans-serif" });
editor.exec("fontSize", { value: "x-small" });
editor.paste("<div style='font-family: Arial,Helvetica,sans-serif; font-size: x-small'></div>");
} else {
// Fix for Editor issue with table locking up inputs on form
editor.exec("inserthtml", editor.value());
}

var container = getContainingWindow();
if (container)
container.bind("close", function(e) {
$("#correspondence-container").find("input, textarea").trigger("blur");
if (viewModel.pendingChanges && !window.confirm("You have unsaved changes to this correspondence.\r\rClick OK to continue and discard changes.")) {
e.preventDefault();
return;
}

viewModel = null;
});

if (viewModel.Job.FileName == null && viewModel.Job.OriginalFileName != null)
container.one("activate", function() { alert("Previously uploaded Source Data file is missing from server, please upload new Source Data file."); });
editor.focus();
});

[Alex Gyoshev]

Hello Dean,

We tried reproducing the problem in this jsBin, but we found that some key functionality is missing. Can you please isolate the problem there?

Regards,
Alex Gyoshev
the Telerik team

[Dean Wise]

I've added almost the enter views' code into the bin and can't get it to run correctly so that I can view the even in the console. Please take a look and let me know.

Thanks,
Dean

[Alex Gyoshev]

Hello Dean,

I am sorry, but I could not understand. Can you reproduce the scenario, or is there an attachment missing in the previous post? 

Greetings,
Alex Gyoshev
the Telerik team

[Nipun]

the paste event does fire every time.
you can confirm this by using an alert box.

but this is the sequence..
1. paste event fires..THEN
2. content is pasted into editor

this is what makes it confusing and results it the behavior your describing.
they need to fix this.

[Alex Gyoshev]

Hello Nipun,

Yes, because the paste event allows users to process the pasted content, it is triggered before the content is inserted in the editor. If you want to process the content, change the html field of the event arguments, like shown in the paste event documentation. If you need to use the editor content after it has been inserted, bind a single select event handler in the paste event and get the value there, like shown in this Dojo snippet.

Regards,
Alex Gyoshev
Telerik