Embedded mode

This concept page describes how and when to use the embedded mode of Fonto Editor.


Embedded mode is intended for editors that are embedded on a pre-existing (CMS powered) web page, such that they cannot use the full size of the web page. This embedded mode will optimize Fonto's UI for this scenario.

What you'll need

Effects on the editor

  • The content view is stretched to take up all available width, instead of being a fixed width; sidebars are opened on top of the content view, resulting in a horizontal scrollbar for the content view.

    This also means that using operations that change the document width has no effect when embedded mode is enabled. This affects the set-document-content-width-to set of operations and the wide-canvas-content-view-to operations.

  • The zoom operations do still work: they only change the text size when embedded mode is true. Use of the zoom-content-view-to operations is preferred over the set-document-content-width-to and set-content-view-text-size-to operations even for applications that do not use embedded mode.
  • The status bar is automatically hidden from view, after the editor is focused/hovered for the first time. The status bar is automatically revealed when hovering for a little bit near the bottom of the screen. It can be pinned by toggling the thumb-tack icon on the bottom left. Pinned means it is no longer automatically hidden when hovering outside the status bar.
  • The masthead is displayed as a single line with a single select to select a tab, instead of the normal two lines with tab buttons on the first line.

    The masthead is only changed if you are using FxEditorMasthead within the masthead component you have registered. If so, you don't have to change this masthead component in any way.

Current limitations

Embedded mode has some limitations, and for that reason some properties are ignored when that mode is enabled.

  • The isHighlightedTab and isHighlightedTabQuery properties of tab items given to FxEditorMasthead are ignored.
  • Make sure you don't add to many quick access and/or right aligned buttons to your masthead, especially with (long) labels. These will limit the available space for buttons in each of your tab toolbars.
  • Make sure you have not set the theme-name configuration variable to 'fontoBlue'. That configuration variable will take precedence over this scope variable. The intent is for theme-name to be 'neutral' in combination with embedded mode. By default, when embedded mode is enabled, this will happen automatically if you do not set theme-name to anything. Please refer to themes for more info.


Enable embedded mode

  • Create the file "config/configuration.js" in your editor and add the following code to enable embedded mode.
configuration.js
import configurationManager from 'fontoxml-configuration/src/configurationManager.js';

configurationManager.set('use-embedded-mode', true);

Final result

Was this page helpful?