Making Kendo Editor Readonly

Question

I have a Kendo Editor defined as below:

 @(Html.Kendo().Editor()
          .Name("editor")
          .Tag("div")
          .Tools(tools => tools
                .Clear()
                .Bold().Italic().Underline().Strikethrough()
                .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
                .CreateLink().Unlink()
                .InsertImage()
                .TableEditing()
                .FontColor().BackColor()
          )
          .Value(@<text>
             <p> You are inside the editor. And in the editor there are some
                 anchor tags. 
             </p>

I want to make this editor as readonly and the anchor tags inside the editor as clickable.

I wrote the below Javascript code to achieve this behavior. And even followed the answers provided in similar posts on google search and in stackoverflow also. But none is working and editor is not Readonly. I can still edit.

Below is the code I tried:

<script>
    var editor = $('#editor').data("kendoEditor"),
        editorBody = $(editor.body);

    // make readonly
    editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false);

</script>

Please suggest where I am going wrong and how can I achieve this behavior.

TIA for your help!

There is no read-only mode for Kendo Editor that I know of, I usally just render the raw HTML onto the page. — Padhraic, Apr 21 '16 at 04:46

score 4 · Answer 1 · answered Nov 12 '16 at 01:01

The following snippet will make a Kendo HTML Editor read-only:

var editor = $("#editor").data().kendoEditor;
var editorBody = $(editor.body)
editorBody.attr("contenteditable", false);

or if you're feeling the need to be terse, you can wrap it all into a single line:

$($("#editor").data().kendoEditor.body).attr("contenteditable", false);

If you need to toggle the editor between read/write and read-only, I'd recommend wrapping this snippet in its own little function and binding that directly to the click event on the button / anchor / etc that you want to use to toggle the behavior.

Tested this functionality on Kendo UI v2015.3.1111; YMMV on older versions of the API.

Making Kendo Editor Readonly

1 Answers1