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

8 posts, 0 answers
  1. Dean Wise
    Dean Wise avatar
    5 posts
    Member since:
    Jan 2013

    Posted 30 Apr 2013 Link to this post

    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
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 01 May 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dean Wise
    Dean Wise avatar
    5 posts
    Member since:
    Jan 2013

    Posted 01 May 2013 Link to this post

    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();
    });
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 02 May 2013 Link to this post

    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!
  6. Dean Wise
    Dean Wise avatar
    5 posts
    Member since:
    Jan 2013

    Posted 05 May 2013 Link to this post

    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
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 06 May 2013 Link to this post

    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!
  8. Nipun
    Nipun avatar
    1 posts
    Member since:
    Nov 2010

    Posted 26 Feb 2015 in reply to Dean Wise Link to this post

    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.
  9. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 02 Mar 2015 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready