Demos
Browse all demos

Sticky Toolbar

Scroll down through a long document: the toolbar stays pinned to the top of the window.

  • config.stickyToolbar = true keeps the toolbar in view while the page scrolls. Pair it with config.autoGrow so the page scrolls rather than the editing area.
  • If your page has a fixed or sticky header, move the toolbar below it with one CSS rule (shown in the code). This page does exactly that for its 70px header.
<style>
    /* This page has a 70px sticky header: park the toolbar just below it. */
    .richtexteditor.rte-toolbar-sticky rte-toolbar.rte-toolbar-desktop { top: 70px; }
</style>
<div id="div_editor1"></div>
<script>
    var config = {};
    config.stickyToolbar = true; // the toolbar stays in view while the page scrolls
    config.autoGrow = true;      // the editor grows with its content, so the PAGE scrolls

    var editor1 = new RichTextEditor("#div_editor1", config);
</script>