I have a Kendo Editor, defined as below:
@(Html.Kendo().Editor()
.Name("RestrictionsEditor")
.Tag("div")
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.CreateLink().Unlink()
.InsertImage()
.TableEditing()
.FontColor().BackColor()
)
.Value(@<text><p> This editor is readonly and will get into edit mode only after 'Edit' button is clicked</p></text>))
I have editor as readonly initially and I am doing that as below:
<script type="text/javascript">
$(function ()
{
var editor = $("#RestrictionsEditor").data("kendoEditor"),
editorBody = $(editor.body);
// make readonly
editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false);
})
</script>
Now, I have been trying to get the editor to edit mode when a button is clicked.
I have defined my button as below right above my editor:
<button class="btn-sm" id="edit">Edit</button>
And I am writing the Javascript as:
<script type="text/javascript">
$("#edit .btn").click(function () {
var editor = $("#RestrictionsEditor").data("kendoEditor"),
editorBody = $(editor.body);
editorBody.attr("contenteditable", true).find("a").off("click.readonly");
})
</script>
When I run my code, the editor is in readonly mode initially and as soon as I click 'Edit' button it takes me back to the original page, out of the modal. Forgot to mention, Editor is inside of a tab in modal.
How can I achieve this behavior - Kendo Editor in readonly mode initially and after 'Edit' button is clicked, Editor gets in edit mode.
Thanks!
