Basic Guides

Quickstarts are step-by-step guides aimed at getting a FontoXML Editor instance up and running as quick as possible.

These guides use examples and short instructions to guide you through setting up a new instance of FontoXML Editor. For more in-depth guides on specific topics, see our How-to guides section.

  • Configure elementsThis step by step guide is aimed at getting visible content in your instance of Fonto editor.
  • Create a mastheadThe masthead in Fonto is more commonly known as the toolbar of a text editor. In this step we will help you set it up. For more information click on the following link: Create a Masthead
  • Create operationsIn this step we will set up our first operation. Operations are interactions with the state of the editor instance, for example inserting an element or opening a sidepanel.
  • Configure clipboard behaviorThis guide describes how to configure the different translations used when pasting into FontoXML from different sources.
  • Create a popoverPopovers are usually small components which will appear near a clicked element, button or icon. Popovers can contain additional information about an element or other object, and optionally provide buttons for any further actions, like edit or remove. As an alternative to creating a custom popover yourself, the platform offers some complete, ready-to-use popovers.
  • Create a sidebarSidebars are located in the area to the right of the document view, and can be used alongside the document.
  • Create a modalModals are used, for example, when user input is expected before an operation can be executed. Before creating a modal always check if the modal doesn't already exist. See our list of available modals for more information.
  • Create a custom widgetWidgets are used for placing UI, such as icons, around elements. Besides the widgets provided by the platform it is also possible to create custom widgets.
  • Create a formForms can be freely composed by using the available form field components and optionally wrapping them in FormRow or Form components as desired. This guide describes some of the basic steps to get simple forms up and running quickly. Consider playing around with the different examples on the form example page on the FDS playground to get a better understanding of the possibilities.
  • Create the document zoomThis guide describes how to offer the author ways to change the text and/or document size.
  • Configure tablesThis guide describes how to configure tables and how to make use of the table related operations offered by the platform.
  • Upgrade the editorWhen a new version of the FontoXML platform is released a few steps need to be taken to apply this to your editor instance.
  • Build the editorWhen your application is ready to deploy, you should generate a build. This combines and minifies all javascript for the FontoXML platform with your application code into a single .js file, and bundles all assets in a single directory.