New to Kendo UI for jQuery? Download free 30-day trial

Show the Editor in Full Screen

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 show the Kendo UI for jQuery Editor in full screen mode?

Solution

You can render the Editor in full screen by using the Full-screen API.

The following example demonstrates how to apply this approach.

  <textarea id="editor"></textarea>

  <style>
    @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
      .selector:not(*:root), .k-fullscreen .k-editor .k-editable-area {
        height: auto;
      }

      .selector:not(*:root), .k-fullscreen .k-editor .k-editor-toolbar-wrap {
        height: 35px;
      }
    }
    .k-fullscreen .k-editor {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100% !important;
    }
  </style>

  <script>
      var classHolder = $(document.documentElement);
      var fullscreenChange = "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange";
      $(document).bind(fullscreenChange, $.proxy(classHolder.toggleClass, classHolder, "k-fullscreen"));

      function toggleFullScreen() {
        var docEl = document.documentElement;

        var fullscreenElement =
            document.fullscreenElement ||
            document.mozFullScreenElement ||
            document.webkitFullscreenElement ||
            document.msFullscreenElement;

        var requestFullScreen = docEl.requestFullscreen ||
            docEl.msRequestFullscreen ||
            docEl.mozRequestFullScreen ||
            docEl.webkitRequestFullscreen;

        var exitFullScreen = document.exitFullscreen ||
            document.msExitFullscreen ||
            document.mozCancelFullScreen ||
            document.webkitExitFullscreen;

        if (!requestFullScreen) {
          return;
        }

        if (!fullscreenElement) {
          requestFullScreen.call(docEl, Element.ALLOW_KEYBOARD_INPUT);
        } else {
          exitFullScreen.call(document);
        }
      }

      $("#editor").kendoEditor({
        tools: [
          {
            name: "fullscreen",
            template:
              '<a class="k-button" onclick="toggleFullScreen()">' +
                '<span class="k-icon k-i-maximize k-tool-icon" /> Toggle fullscreen' +
              '</a>'
          }
        ]
      });
  </script>

See Also

In this article