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:

    @(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!

  2. Kendo UI is VS 2017 Ready
Back to Top