This is a migrated thread and some comments may be shown as answers.

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

7 Answers 985 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Dean Wise
Top achievements
Rank 1
Dean Wise asked on 30 Apr 2013, 10:20 PM
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

7 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 01 May 2013, 08:53 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dean Wise
Top achievements
Rank 1
answered on 01 May 2013, 07:16 PM
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();
});
0
Alex Gyoshev
Telerik team
answered on 02 May 2013, 07:23 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dean Wise
Top achievements
Rank 1
answered on 06 May 2013, 01:25 AM
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
0
Alex Gyoshev
Telerik team
answered on 06 May 2013, 07:22 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nipun
Top achievements
Rank 1
answered on 27 Feb 2015, 02:19 AM
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.
0
Alex Gyoshev
Telerik team
answered on 02 Mar 2015, 02:52 PM

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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Editor
Asked by
Dean Wise
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Dean Wise
Top achievements
Rank 1
Nipun
Top achievements
Rank 1
Share this question
or