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>