Editor customization help

5 posts, 0 answers
  1. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 15 Jul 2014 Link to this post

    Hi, I'm currently using the server-side wrapper version of the Editor tool and I have a couple project requirements that I need help with:

    1) Disable line breaks via ENTER key

    2) Add script references to Editor's IFRAME document (maybe how the style sheets can be added?)

    3) Disable drag-and-drop OR leave enabled but strip out all HTML (example would be dragging and dropping styled elements from a Word doc)

    4) Disable styling shortcuts such as CTRL+B
  2. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 15 Jul 2014 in reply to Bob Link to this post

    For items 1 and 3, I created a hack that seems to be working.  "subjectSection" is a wrapper div and "Subject" is the editor in below steps.

    1) hide toolbar; needed as some commands like "bold" won't fire command event if tool is disabled
    #subjectSection .k-editor-toolbar-wrap {
        display:none !important;
    }

    2) hook-up events
    .Events(events => events
            .Select("subjectSelected")
            .Change("subjectChanged")
            .Paste("subjectChanged")
            .Execute("subjectCommandExecuted")

    3) Create an undo flag and set it to true whenever a command is fired that you don't want
    var undo = false;
     
    function subjectCommandExecuted(e) {
        undo = e.name !== "undo";
    }

    4) After command fired, the select event will be fired, so execute undo command if undo flag is set to true
    function subjectSelected(e) {
        if (undo === true)
        {
            undo = false;
            $("#Subject").data("kendoEditor").exec("undo");
        }
    }


  3. Kendo UI is VS 2017 Ready
  4. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 15 Jul 2014 Link to this post

    I figured out how to disable drag-and-drop:

    window.onload = disableDragAndDrop;
     
    function disableDragAndDrop() {
        try {
            $($('#subjectSection iframe').get(0).contentDocument.body).bind('dragover drop', function (event) {
                event.preventDefault();
                return false;
            });
        }
        catch (ex) { }
    }
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 17 Jul 2014 Link to this post

    Hello Bob,

    It appears that you are trying hard to change some base functionality of the editor, which is deeply integrated in it. What is the scenario that demands this, and does it really require a dismantled editor? Either way, the widget is not designed to support this behavior.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 17 Jul 2014 in reply to Alex Gyoshev Link to this post

    I am building an email template editor form with one editor control for Subject and another for Body (see screenshot attachment).  We are allowing the user to insert keywords into the Subject that appear as a button so the user can easily delete/backspace the keyword. 

    So, we are using editor for (1) insertion of <input type=button> and (2) for the editor to bound to the model field.  Since I've got the above "hacks" working, I think we're going to stick with it but I may change later to a contenteditable DIV (or something similar).
Back to Top
Kendo UI is VS 2017 Ready