Custom PasteCleanup, Deserialization and Serialization callback usage

3 posts, 0 answers
  1. CWS
    CWS avatar
    4 posts
    Member since:
    May 2007

    Posted 10 Aug Link to this post

    Hello,

    I am having some trouble using custom callbacks for PasteCleanup, Deserialization or Serialization. Whatever input string I give as the custom callback, be it a function name or declaration, just gets double quoted in the editor configuration javascript that is generated and is then seemly ignored. Unlike how setting an event callback works.

    How do I setup an editor to use these features?

    Sample code:

    @(Html.Kendo().Editor()
        .Name("bloop")
        .PasteCleanup(e => e.Custom("onPaste"))
        .Deserialization(e => e.Custom("onDeserialization"))
        .Serialization(e => e.Custom("onSerialization"))
        .Events(e => e.Change("onChange"))
    )
     
    <script type="text/javascript">
        function onPaste(html) {
            console.log('onPaste');
     
            return html;
        }
     
        function onSerialization(html) {
            console.log('onSerialization');
     
            return html;
        }
     
        function onDeserialization(html) {
            console.log('onDeserialization');
     
            return html;
        }
     
        function onChange() {
            console.log('onChange');
        }
    </script>

     

    Using that above code Html.Kendo().Editor() is generating the following javascript when it executes:

    jQuery(function(){jQuery("#bloop").kendoEditor({"change":onChange,"deserialization":{"custom":"onDeserialization"},"pasteCleanup":{"custom":"onPaste"},"serialization":{"custom":"onSerialization"},"tools":[{"name":"formatting"},{"name":"bold"},{"name":"italic"},{"name":"underline"},{"name":"justifyLeft"},{"name":"justifyCenter"},{"name":"justifyRight"},{"name":"insertUnorderedList"},{"name":"insertOrderedList"},{"name":"outdent"},{"name":"indent"},{"name":"createLink"},{"name":"unlink"},{"name":"insertImage"},{"name":"createTable"},{"name":"addColumnLeft"},{"name":"addColumnRight"},{"name":"addRowAbove"},{"name":"addRowBelow"},{"name":"deleteRow"},{"name":"deleteColumn"}]});});

    Note how onDeserialization is double quoted where onChange is not.

    Using R2 2016 SP2 (2016.2.714) with MVC4.

    Thank you

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 12 Aug Link to this post

    Hello,

     

    The issues regarding serialization and deserialization custom options have been logged internally and will be fixed for the next official release. 

     

    For the pasteCleanup.custom I am logging it as a bug to be handled. You can monitor it from here: https://github.com/telerik/kendo-ui-core/issues/2059. For the time being, the custom pasteCleanup is not available for the MVC wrapper, but you can alternatively use the paste event to clean or strip any content to be pasted: http://docs.telerik.com/kendo-ui/api/javascript/ui/editor#events-paste

     

    As for serialization.custom and deserialization.custom, you can use the setOptions method in order to assign them later in the code. Like in this example: 

    @(Html.Kendo().Editor()
        .Name("bloop")
        .Events(e => e.Change("onChange").Paste("onPaste"))
        .Tools(t => t.ViewHtml())
    )
     
     
    <script type="text/javascript">
        $(document).ready(function () {
            var kendoEditor = $("#bloop").data("kendoEditor");
            kendoEditor.setOptions({
                deserialization: {
                    custom: onDeserialization
                },
                serialization: {
                    custom: onSerialization
                }
            });
        });
     
     
        function onPaste(html) {
            console.log('onPaste');
     
            return html;
        }
     
        function onSerialization(html) {
            console.log('onSerialization');
     
            return html;
        }
     
        function onDeserialization(html) {
            console.log('onDeserialization');
     
            return html;
        }
     
        function onChange() {
            console.log('onChange');
        }
    </script>

     

    I hope that helps.

     

    Regards,
    Ianko
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. CWS
    CWS avatar
    4 posts
    Member since:
    May 2007

    Posted 12 Aug in reply to Ianko Link to this post

    I was able to get the workarounds working.

    Thank you

Back to Top