How to customize the masthead
This guide helps you customize the masthead by adding more toolbars to it.
What you need
You need the following things before starting this guide:
-
A valid license for the relevant Fonto products, Node.js and Fonto's development tools installed on your machine. Read more about preparing your development environment.
-
A Fonto Editor configuration. Get started with Fonto Editor.
This guide uses the editor created by following the Create a base editor guide. Files such as Recipe
may be named differently in your Fonto Editor instance.
The file that defines your masthead is typically located in a folder called editor-masthead
. And is called Editor
by default.
Add a new toolbar tab
You can add any amount of toolbar tabs by using the tabs
property on Fx
. Check out the tabs
!
We'll start with a single toolbar tab with label "Start". The tabs
property should therefore be an array with only one object.
Update Recipe
with the following:
You can organize your variables however you like. As a matter of code organization you could move the contents of the "Start" tab's content
property to a new file!
Add buttons and drop-downs to your toolbar
We have a range of buttons and drop-downs that are designed to look nice in the toolbar. You are encouraged to compose those however you want.
For example, the most common toolbar button is the Fx
Buttons in the toolbar are normally driven by operations. For that reason most code examples use Fx
, Fx
, and similar operation-aware components. Read more about operations and learn how to add your own!
You can create drop-down menus, and drive its menu items with operations too, using FDS' Button
Or even the combination between a clickable button and a drop-down, using Fx
Or a button that adopts the behavior of the first operation from a list that is enabled for that cursor position, using Fx
If you want to add a live operation to your toolbar now, follow the Create an operation guide.
Add quick-access buttons for common functionality
The quick-access buttons are always visible to the left of the toolbar tab labels. This makes them very suitable for buttons that need to be visible from any toolbar; for example "Save", "Undo", "Redo" and "Remove formatting" functionality.
See also the Fx
Fonto makes no assumption on where you want those buttons, so you have to add them yourself.
Pass the quick
prop to <
. You can use <
to align and space buttons in that area as you like.
Add some useful interface controls to the toolbar
Some common controls that may improve the life of a user are setting the zoom level, and accessing the Quick Navigation feature. Both features are included with the platform. Other functionality, such as the spell-checker or Document History, might come from an add-on!
See also the open-quick-navigation and zoom-content-view-to operations.
You could use Fxmasthead
property and a Button
If you're configuring for the Fonto Review product as well, consider adding the Insert
For object comments, it will only render the button if the selection is placed in an element that meets the enabled
query.
All done! You'll probably want to add a lot more buttons to your toolbars, or add more toolbars to your masthead. Simply repeat some of the steps from this guide and use any of the component we provide, or even bring your own!
Frequently asked questions
How can I customize the masthead for Fonto Review?
This article is referenced from...
Guides and concept pages: