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.
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 thewide-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 theset-document-content-width-to
andset-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
is
andHighlighted Tab is
properties of tab items given to FxEditorMasthead are ignored.Highlighted Tab Query -
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
'fonto
. That configuration variable will take precedence over this scope variable. The intent is forBlue' 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 settheme-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
JavaScript
import configurationManager from 'fontoxml-configuration/src/configurationManager.js';
configurationManager.set('use-embedded-mode', true);
Final result
