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

Editor customization help

4 Answers 70 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 15 Jul 2014, 06:15 PM
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

4 Answers, 1 is accepted

Sort by
0
Bob
Top achievements
Rank 1
answered on 15 Jul 2014, 06:51 PM
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");
    }
}


0
Bob
Top achievements
Rank 1
answered on 15 Jul 2014, 08:14 PM
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) { }
}
0
Alex Gyoshev
Telerik team
answered on 17 Jul 2014, 06:28 AM
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!
 
0
Bob
Top achievements
Rank 1
answered on 17 Jul 2014, 12:38 PM
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).
Tags
Editor
Asked by
Bob
Top achievements
Rank 1
Answers by
Bob
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or