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

Make the Inline Editor Toolbar Always Visible

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 always show the toolbar of the Kendo UI for jQuery Editor?

Solution

By design, the toolbar of the inline Editor shows up when the widget is focused and gets hidden when the Editor is blurred.

The following example demonstrates how to override this behavior and force the toolbar to be always visible.

    <p>The Editor toolbar will remain visible after blurring the widget.</p>
    <br /><br /><br />
    <div id="editor">
        <p>Editor content</p>
    </div>

    <script>

    $(function(){
        $("#editor").kendoEditor({
        });

        // The start of the example.
        // Retrieve the Editor widget object.
        var editor = $("#editor").data("kendoEditor");
        // Show the toolbar.
        editor.toolbar.show();
        // Detach the handler which hides the toolbar.
        $(editor.body).addClass("k-state-active").off("focusout.kendoEditor");
    });

    </script>

See Also

In this article