Initial setup

This guide guides you through setting up Fonto Content Quality.

What you need

You need to have a valid license file for Fonto Content Quality, a configured instance of Fonto Editor, and Docker installed before getting started. Read more about the requirements.


Initialize the back-end

Create a new directory called content-quality for the back-end of Fonto Content Quality. This directory can be placed anywhere, but we encourage you to place it in the root of your editor source folder, tying both together in your version control system.

Within that directory, initialize the back-end with the following command:



fdt content-quality init --version <version>

FDT has now created the following files on your local machine:




This file is used to declare default Docker environment variables for the back-end. This file is not used for self-contained builds.


This file is used to define the operation(s) of the analysis that Fonto Content Quality needs to execute.


This is a private file for FDT. You should leave this file as is.


Enable the add-on

Enable the fontoxml-content-quality add-on in your instance of Fonto Editor. The add-on contains the required components for Fonto Content Quality to operate. See the Add-ons page for more information.

You can enable this add-on by navigating your terminal back to the editor directory, and using the following command:



fdt editor add-ons --add fontoxml-content-quality --non-interactive

Configure the add-on

Depending on your schema, you might need to configure chunkBorderQuery and chunkIsContentQuery. See the content-quality-configuration documentation for more information about these configuration options.


Configure the proxy endpoint

The proxy endpoint routes the requests from the development server to your Content Quality back-end instance.

See the Infrastructure page for more information about why Fonto Content Quality requires a proxy endpoint.

Configure the development server proxy endpoint as follows:



'use strict';

module.exports = () => {
	return {
		proxy: {
			'content-quality': 'http://localhost:6000'

Add the Content Quality Controls button to the toolbar

Place the ContentQualityControls button in the Masthead, usually in a toolbar specifically for tools like spell checkers, zooming functionality, and so on.



import React from 'react';
import { MastheadToolbar, MastheadToolbarButtons } from 'fds/components';
import ContentQualityControls from 'fontoxml-content-quality/src/ContentQualityControls.jsx';

const ToolsToolbar = () => (
			<ContentQualityControls />

export default ToolsToolbar;

Enable the spell checker

This step is optional. It guides you through the configuration of a spell checker using Fonto Content Quality.

To avoid conflicts, please make sure to disable the basic spell checker add-on if you have it configured.

Fonto Content Quality performs analysis based on the configuration in the analysis.xml file. The analysis file contains the instructions to perform that will result in a set of annotations. See the Configure the analysis documentation for the available analysis configuration options.

Add the SpellCheckAnnotator to the analysis file, download the appropriate dictionary files, and save them to disk in the folder <editor>/content-quality/Configuration/.

You can download the appropriate Hunspell dictionary and affix files from LibreOffice. See the SpellCheckAnnotator documentation for alternative download locations and other information.



<?xml version="1.0" encoding="utf-8"?>
<analysis xmlns="">

		languages="en en-US"
		spelling="spelling.txt" />


Make sure that the language corresponds with the language of your content and the dictionary files. Feel free to adjust the example to match your preferred language. See the baseIETFLanguageQuery configuration option for more information on reporting the language of your content to the back-end.

Create a list of words which are considered to be spelled correctly. These words also appear as suggestions for similar, but incorrectly spelled, words:




See the spell checker Configuration section for details on how to make more advanced configurations. Also checkout our FAQ section for answers on common questions.


Create a configuration package

This section is optional. It guides you through the creation of an empty configuration package. You will be using this package later-on in the guides Adding a custom annotation and Configuring category filters.

Create an empty configuration package called content-quality-configuration.

Create a manifest file for the configuration package:



	"dependencies": {
		"fontoxml-content-quality": "platform/fontoxml-content-quality"

Create an empty installation function:



export default function install() {
	// Set-up for the package.

Create an empty Operations file:




Register the package in the root package manifest of your application:



	"dependencies": {
		"content-quality-configuration": "packages/content-quality-configuration"

Start the instance

You are now done configuring the Fonto Content Quality instance and ready to do a test run.

Execute the following command inside the content-quality folder to get your instance up and running. This command builds and runs your image inside a Docker container. Make sure Docker is running.



fdt content-quality run

To start the back-end of Fonto Content Quality, at least one analytic needs to be configured in the analysis.xml file.

While running Fonto Content Quality, also make sure to start the development server for Fonto Editor. Open up a browser and visit the URL of the development server and test the integration.

If you followed all of the steps of this guide, you will now have a Quality check button in your toolbar. Use that button to open up the navigator and to turn on the quality check. It will give you suggestions from the configured spell checker.

You have completed the initial setup of Fonto Content Quality.

Consult the Configuration documentation for additional configuration options, or follow the guides for Adding a custom annotation and Configuring category filters.

See our Troubleshooting section for common questions and answers. See the FAQ section of the SpellCheckAnnotator for troubleshooting the spell checker.