This is a migrated thread and some comments may be shown as answers.
Getting Kendo Editor to edit mode when a button is clicked
1 Answer 5 Views
This is a migrated thread and some comments may be shown as answers.
Kristy
Top achievements
Rank 1
Kristy asked on 11 Apr 2016, 06:20 PM

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!

1 Answer, 1 is accepted

Sort by
0
Misho
Telerik team
answered on 13 Apr 2016, 10:19 AM
Asked by
Kristy
Top achievements
Rank 1
Answers by
Misho
Telerik team
Share this question
or