Enable and Disable the Editor

Environment

Product	Progress® Kendo UI® Editor for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I enable and disable the Kendo UI for jQuery Editor?

Solution

The following example demonstrates how to achieve the desired scenario.

EditPreviewOpen In Dojo

  <style>
      #overlay{
        top:100;
        position:absolute;
        background-color:black;
        opacity:0.1;

      }
      #content{
        top:100;
        position:absolute;

      }
    </style>

    <input type="button" class="k-button" value="Disable" onclick="setzIndex(2)">
    <input type="button" class="k-button" value="Enable" onclick="setzIndex(0)">

    <div id="overlay" style="width:740px;height:440px"></div>
    <div id="content">
      <textarea id="editor" rows="10" cols="30" style="width:740px;height:440px"></textarea>
    </div>
    <script>
      function setzIndex(index){
        $("#overlay").css("z-index", index);
      }
      $(document).ready(function() {
        // Create the Editor from a textarea HTML element with the default set of tools.
        $("#editor").kendoEditor();
      });
    </script>