Preparing your editor

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

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

The integration add–on provides the necessary wiring for opening, browsing documents and/or images and closing an editor in a connectors application.

It detects if the 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.

Step 1 (required)

Install the fontoxml-integration-connectors @ fontoxml-integration-connectors/README.md add-on and add the package to your editor as described by the documentation.

Step 2 (required)

Fonto 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__Fonto is creating your document."
                    }
                }
                // ... other steps
            ]
        }
    }

Step 3 (Recommended)

Add the following configuration to your config/configuration.js:

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.

Step 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 />
        </Flex>
    );

    render() {
        return (
            <FxEditorMasthead
                mastheadAlignRightContent={this.mastheadAlignRightContent}
                showFontoLogo={false}
                tabs={tabs}
                quickAccessButtons={this.quickAccessButtons}
            />
        );
    }
}

Build and start the editor to verify it runs without errors.

Finally

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