Toolbar

Toolbar Offset

The toolbarStickyOffset option is useful if you have toolbarSticky: true and you need the toolbar not to go all the way to the top of the page. E.g. you have a sticky header on the page and the editor's toolbar should remain below the header.

The toolbarStickyOffset option also works when toolbarBottom option is set to true. In this case the offset is relative to the bottom of the page.

Try it yourself:

Edit in JSFiddle

HTML

Copy

<div id="froala-editor">
  <p><strong>Dummy text to enable scroll.</strong></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.</p>
</div>

JAVASCRIPT

Copy

<script>
  new FroalaEditor('div#froala-editor', {
    toolbarStickyOffset: 100
  })
</script>