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 Basic Guides section.

  • Creating a base editor
  • 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 an advanced Masthead https://documentation.fontoxml.com/editor/latest/create-a-masthead-21334129.html.
  • 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.
  • 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 https://fds.playground.fontoxml.com/form 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.
  • 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.
  • Configure a table toolbarThis guide aims to help you configure a table toolbar for all your tables.
  • Configure contextual operationsIn this guide we'll create and configure contextual operations for a few elements in a dummy editor.
  • Create a DEV-CMS connectionBy following this guide it is possible to set up a custom endpoint route in addition to Fonto’s standard CMS contracts https://documentation.fontoxml.com/editor/latest/cms-connectors-api-7274761.html. This allows you to build custom integrations between Fonto and your CMS.

Was this page helpful?