How to create a basic Fonto Editor configuration

This guide is a step by step guide to create a new Fonto Editor for an XSD schema. After completing this guide you will have the minimal configuration required for your schema. You can then follow other guides for additional and more advanced configuration.

Step 1: Create the schema bundle

This can be done by following our guide on creating a schema bundle.

Step 2: Initialize a new editor for your schema bundle

This step uses Fonto's Development Tools to generate code for your schema bundle. This is a one-time step.

  • Create a new directory alongside your schema bundle, for example "training-editor", and navigate to it in your terminal.

  • Run the following command, make sure to provide a valid version number:

    Terminal

    Shell

    fdt editor init --version <version> --schema ../training-schema-bundle

    You can use the --help flag on any FDT command. It will then show you which options and parameters are expected.

FDT will prompt you for several other properties, which are all optional. When prompted for add-ons it is useful to select the "XML Source View [fontoxml-xml-view]" option. It allows us to see the document XML better. Do not select any other add-ons, as some of them require additional configuration in order to work. You can always install more add-ons later.

After the fdt editor init command finishes, your folder structure should look like this:

Folder structure

Other

Training/
  training-schema-bundle/
    ...
  training-editor/
    config/
    dev-cms/
      files/
    packages/
      editor-clipboard-configuration/
      editor-masthead/
      recipe-sx-module/
      recipe-sx-shell/
    platform/
      ...
    config.js
    manifest.json
    messages-template.json

Step 3: Configure a test document

This step lets Fonto Editors development environment know which document(s) should be used for testing during development. It has to be a schema valid document, and you may have multiple. In the example schema bundle for this guide the example XML files are included in training-schema-bundle/test/.

  • Create a dev-cms/files/ directory in your editor code, and copy the test XML files there

    Terminal

    Shell

    cp training-schema-bundle/test/*.xml training-editor/dev-cms/files
  • Open the config.js file in your editor, training-editor/config.js, and replace the "INSERT_FALLBACK_DOCUMENT.xml" string with the files(s) you want to use for tests. For the example schema, your config.js becomes:

    training-editor/config.json

    JSON

    'use strict';
    
    module.exports = () => {
        return {
            scope: {
                documentIds: ['fried-guinea-pig.xml', 'mushroom-lunch.xml']
            }
        };
    };

Your folder structure should now look approximately like so:

Folder structure

Other

Training/
  training-schema-bundle/
    ...
  training-editor/
	dev-cms/
      files/
        fried-guinea-pig.xml
        mushroom-lunch.xml
    ...

Step 4: Start your development server

The purpose of Fonto's development server is to allow you to configure Fonto Editor without needing a full CMS integration in place. The training-schema-bundle/ folder is no longer required. The rest of this guide, and other guides, will focus on training-editor/.

  • Run the following commands:

    Terminal

    Shell

    cd training-editor
    fdt editor run
  • Open http://localhost:8080 in your browser.

Congratulations on building your first basic Fonto Editor.

That's it, you now have a basic Fonto instance up and running!

Of course it still looks a little empty. The documents are actually being loaded, but the visualization for all elements has yet to be configured with a CVK configuration variant other than the invisible one used in the generated code.

This is a good time to configure it further using one of the quick starts or advanced guides listed below, or by following the // TODO comments in the generated code, as stated at the end by the fdt editor init command.

A screenshot of an empty editor application

Quickstarts

Advanced guides