use-embedded-mode

Type: String

This setting is intended for editors that are embedded in an iframe or have limited screen estate for other reasons. This embedded mode will optimize fonto's UI for this scenario.

Follow the instruction under 'Recommendation' section below for an even easier way to get embedded mode for your editor.

Setting use-embedded-mode to true currently has the following effects: 1) 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.

Note: this also means that using operations that change the document width, do nothing when embedded mode is true, 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. The "zoom-content-view-to" are preferred over the "set-document-content-width-to" (and "set-content-view-text-size-to") operations anyway.

2) the statusbar is automatically hidden from view, after the editor is focused/hovered for the first time. The statusbar 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 statusbar.

3) 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". Note: 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.

Also, make sure you have not set the theme-name configuration variable to fontoBlue explicitly if you set this to true. The intention is for theme-name to be neutral when set use-embedded-mode to true. However, config variables cannot depend on each other for their value, so you have to manually set theme-name to neutral if you set use-embedded-mode to true. Or just use the scope as recommended below:

Recommendation

Alternatively, you don't have to set this configuration variable to use the embedded mode. You can also set useEmbeddedMode to true in the scope. (Or let the CMS set this for you.) Using the scope will set the config variable use-embedded-mode to true and theme-name to neutral automatically, but only if you have not set these configuration variables yourself.