Getting Kendo Editor to edit mode when a button is clicked

2 posts, 0 answers
  1. Kristy
    Kristy avatar
    1 posts
    Member since:
    Apr 2016

    Posted 11 Apr Link to this post

    I have a Kendo Editor, defined as below:

              .Tools(tools => tools
              .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);


    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");


    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.



Back to Top