Get started with Fonto Editor

Fonto Editor is a tool for editing XML in a user-friendly way, and the platform for a lot of functionality around the authoring flow, such as Fonto Review and Fonto Content Quality. Editor is designed to be used by anyone, from editors to the subject matter experts who would rather not create any content whatsoever!

What you need

Make sure you have set up your local development environment.

1

Create a schema bundle

A schema bundle is essentially your own XSD schema files and some instructions for our schema compiler service. If you don't have a schema bundle yet, read more about creating one.

2

Initialize a new editor for your schema bundle

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 --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.

3

Select your initial add-ons

Choosing which add-ons you want to start with is part of the fdt editor init procedure.

Because most add-ons require additional configuration, the easiest thing to do at this stage is select only the "XML Source View [fontoxml-xml-view]" option. This add-on generates the "XML view" sidebar that lets you see the XML source as it is being edited. Very useful during configuration, and as an added bonus, it doesn't need any configuration itself!

You can add (or remove) add-ons at any later point in time by using the fdt editor add-ons command.

After your fdt command finishes, you should have the following directory structure on your disk:

Other

training-schema-bundle/
  fonto.json
  ...
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

Recognize the training-schema-bundle/ directory? It's the schema bundle from the Create a schema bundle guide!

4

Configure a test document

Test documents will help you test your configuration while working on localhost. It is recommended to have a few documents for every different document type in your schema, as well as for any special cases that deserve some extra tests.

If you're using the example schema bundle on GitHub, please find the files in its test/ directory.

From the root of your Editor configuration, create a new directory called dev-cms/files/ and copy your test XML into it. If your files have cross-references between them, refactor those to become absolute references relative to the dev-cms/files/ directory.

Next, open config.js and replace the "INSERT_FALLBACK_DOCUMENT.xml" string with the file names (again relative to dev-cms/files/) you want to use for tests.

For the example schema, your config.js becomes:

TypeScript

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

If all goes well, you now added or modified the following files:

Other

training-editor/
  config.js
  dev-cms/
    files/
      fried-guinea-pig.xml
      mushroom-lunch.xml
5

Verify the results

The proper functioning of your new application can be verified quickly by starting or re-starting the development server included with FDT.

Navigate your terminal to the directory of your editor configuration, training-editor/ in this tutorial, and run the following command:

Shell

fdt editor run

You can now open http://localhost:8080 in your browser. The Editor front-end should be displayed nicely, and your browser console should be clear of warnings and errors.

Your network traffic will show that the Editor downloads your test XML from the development server, and pretty soon after configuring some elements you will start to recognize the test document contents too.

That's it, you now have a basic Fonto Editor instance up and running! This is a minimal configuration that you can go ahead and integrate into your CMS, or configure it further.

Frequently asked questions

What technology is Fonto Editor based on?

This article is referenced from...

Guides and concept pages: