Getting started

The Fonto Editor is a tool for editing XML. It is meant to be used by anyone ranging from editors and power users to the subject matter experts that would have preferred to not create any content at all. You can read more about the Fonto Editor and our other products on www.fontoxml.com.

This documentation is meant to guide you towards creating your own instance of the editor. All the way from creating a base editor to an editor fully configured to suit you and your authors needs.

We use these technologies:

Languages Libraries
  • Javascript
  • XPath
  • XQuery
  • JSON
  • JSONML
  • React
  • Glamor
  • Webpack
  • FontAwesome

While proficiency in these languages and libraries is not required, it does help.

All development for the Editor and our other Fonto products is done using the Fonto Development Tools(FDT). This is required for running your development environment instance and comes with a set of useful built-in commands. See https://www.npmjs.com/package/@fontoxml/fontoxml-development-tools for more information.

If you are only interested on what we have to offer on the API side of things and how you can create the editor for your needs scroll down to the Concepts and their corresponding APIs section.

Once you get started with the development of your very own editor we suggest you first follow a couple of our basic guides. These use a schema we've created just for these guides.

  • In our creating a base editor guide we take you through the steps of creating the required input, such as a schema bundle, initializing the editor, all the way to having an editor instance running.
  • From there you can follow the configure elements guide to get the content for the provided documents visualized. This should give you a global idea of how each element in a schema is given a visualization along with expected behavior.
  • To round out the absolute basics is creating operations. Operations are instructions given to the editor, these can range from opening a modal to altering the XML and anything in between. In this guide you'll be creating an operation to wrap a selection with the <b> element. It also teaches you how to then use this in the form of a button on the toolbar.

These guides teach you the bare minimum of showing your content and teaching you how to influence said content. Next up is creating new UIs using our Fonto Design System(FDS). We offer three default types of UIs you can create: popovers, sidebars and modals.

  • In our guide for creating a popover we take you through the steps from creating just a popover to a popover that actually reads data from the XML using XPath.
  • The guide for creating a sidebar is less exciting but none the less important.
  • Modals are generally used when user input is expected, the guide for creating a modal is not directly linked with the recipe schema but will teach you how to make a modal and open it in different use-cases.

These guides should give you a basic idea of how to configure your editor instance.

Concepts and their corresponding APIs

Configuring your elements

Configuration for displaying elements and their respected behavior is done in configureSxModule files by using the following APIs:

Families Each family represents a semantic meaning for content. This is translated to behavior and visualization. This combined with the schema is called the schema experience.
XPath XPath tests are used for identifying the element context you are configuring.
Widgets Widgets can be used to enrich the content view with additional information or interactions.

Example: 

/**
 * Family: configureAsFrame
 * XPath: self::note
 * Widgets: createMarkupLabelWidget, createElementMenuButtonWidget
 */
configureAsFrame(sxModule, 'self::note', t('info'), {
    blockHeaderLeft: [createMarkupLabelWidget()],
    blockOutsideAfter: [createElementMenuButtonWidget()]
});

Mutating XML based on user input

Mutations of XML can be separated in two categories: a mutation initiated by the user and mutating the XML in reaction to a change made by the user. 

Mutation initiated by the user are done with the following APIs:

Operations Operations are instructions for the Fonto Editor to do something. Operations can call other operations.
Transforms Transforms are used to transform or add to the data that flows from step to step within an operation. Often used to determine the context for the mutation.
Actions Actions are instructions that expect no return value or mutation in the XML directly.
Custom mutations Custom mutations are (large) pieces of Javascript code that can be used from within the operation context.

Mutating the XML in reaction to a change made by the user is done with the Mutation Hooks API:

Mutation hooks Mutation hooks are (larger) pieces of XQuery which can be registered to react to events caused by mutations.

Managing and using application state

We offer a variety of classes used for managing/using/altering application state. Here are some examples:

DocumentsManager Information on documents that are currently loaded in the editor.
SelectionManager Get or alter the selection.
IndexManager Run continuous XPath queries in an efficient way.

These are just a small example of all the classes we offer.

Adding a custom endpoint

The Fonto Editor offers all the basic endpoints needed for opening the editor, loading, saving and anything else related to the documents. However you could need additional endpoints that are unique to your editor. These endpoints can be called by using the cmsClient which can be acquired through the ConnectorsManager. An example of how this is used can be found in our guide on creating a dev-cms connection.

Creating custom UI

Custom UI can be created using our component library Fonto Design System(FDS). Custom UI can be presented in the following areas:

Modals Variably sized space which opens over the content view in a fixed on screen position.
Popovers A smaller sized space which is position either at the cursor or near an element in the content.
Sidebars Space on the right side of content view.

Add-ons

In addition to our base functionalities we offer a variety of add-ons that range from adding a side panel for editing attributes to special connectors that allow you to use iFrame messaging instead of API calls. Add-ons can be added or removed using FDT and often require their own configuration. 

Was this page helpful?