Preparing your FontoXML Editor

This steps assumes you already have a configured instance of FontoXML Editor. If you do not already have an editor instance configured, please refer to the  FontoXML Editor Guides to get started.

This article guides you through the process of preparing a configured instance of FontoXML Editor for use in a FontoXML Connectors application.

The integration add–on provides the necessary wiring for opening, browsing documents & images and closing FontoXML Editor in a FontoXML Connectors application.

It detects if FontoXML Editor is launched without an initial document in which case the user is presented with a modal which allows browsing of the underlying storage or the option to create a new document.

These steps are mandatory for an optimal integration.

  1. (Required) Install the fontoxml-integration-connectors add-on:
    Add the fontoxml-integration-connectors package to your editor.

  2. (Required) FontoXML Connectors requires a specific modal to create a document. You will need to change the modal you are using to create files to the specific modal. Follow these steps: 

    1. If you are using the open-document-template-browser-modal operation, replace the operation with open-create-document-form-modal in your operations.json.

    2. After the operation mentioned in step 'a', add the transform step createDocumentFromModalIfApplicable .

      "contextual-insert-topicref--from-template": {
              "label": "Insert new topic",
              "description": "Insert a new topic below the current one.",
              "icon": "file-o",
              "steps": [
                  // ... other steps
                      "type": "operation/open-create-document-form-modal"
                      "type": "transform/createDocumentFromModalIfApplicable",
                      "data": {
                          "selectedDocumentTemplateId": "{{selectedDocumentTemplateId}}",
                          "selectedFolderId": "{{selectedFolderId}}",
                          "documentTitle": "{{documentTitle}}",
                          "pleaseWaitMessage": "t__FontoXML is creating your document."
                  // ... other steps
  3. (Recommended) Add the following configuration to your config/configuration.js:

    configurationManager.set('document-title-element-xpath', '{XPATH_TO_THE_TITLE_ELEMENT_OF_YOUR_DOCUMENT}');

    Where {XPATH_TO_THE_TITLE_ELEMENT_OF_YOUR_DOCUMENT} is an XPath that should resolve to an element. Upon creation of a new document the child content of that element is set to the text provided as the title of the new file.

  4. (Recommended) Add the following element to the quickAccessButtons section of your masthead:

    import ConnectorsFileDropButton from 'fontoxml-integration-connectors/src/ConnectorsFileDropButton.jsx';
    const tabs = [...];
    class DitaStandardMasthead extends PureComponent {
        mastheadAlignRightContent = <FindAndReplaceDropButton />;
        quickAccessButtons = (
            <Flex flexDirection="row" flex="none">
                <ConnectorsFileDropButton />
                <FxOperationButton label="" operationName="undo" />
                <FxOperationButton label="" operationName="redo" />
                <FxOperationButton label="" operationName="convert-range-to-plain-text" />
                <FxSaveButton />
        render() {
            return (
  5. Build & Start the FontoXML Editor to verify it starts without errors.

Build FontoXML Editor and copy the contents of the dist directory to the appropriate location in the FontoXML Connectors directory. See  Getting Started  for details.