Skip to content

Xeditor

Overview

Xeditor is an intutive and lightweight web-based XML authoring tool. It is also a powerful developer framework that you can customize and integrate into any other system (CMS, Google Drive, etc.).

Technology

Xeditor is built using JavaScript (with ExtJS 6), HTML, and CSS. Currently it ships with Node.js in order to serve the files, although you are free to use the server-side language of your choice.

Schemas

We've made pre-built packages for DITA 1.2 and DITA 1.3. Xeditor can also be configured for any schema or DTD.

Supported Browsers

Xeditor supports modern versions of the following browsers:

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Getting started

We reccomend that you start by installing the Xeditor demo package. This package comes with a simple schema pre-installed so you will be able to get a feel for the architecture and play around in a test environment.

Xeditor Requirements

  1. Install Node.js (version 6.11.5 recommended). This will install everything you need to use commands node and npm.
  2. Test installation and version using node -v and npm -v

Blackbox requirements

The Blackbox is our middleware and it is optional for your end configuration. However, it is required to run Xeditor pre-built packages.

  1. Install Java RE supporting Java 6.
  2. Note

    Manually installing xsltproc is only necessary for Linux systems. Windows and Mac will already have this installed.

    Install xsltproc with sudo get-apt install xsltproc.

Install and run demo

  1. Note

    You will need user credentials in order to download our packages. For more information on how to obtain a demo license, please contact us at Support. Otherwise, you can also see our online Demo, which does not require credentials.

    Login to our npm repository.

    npm login --registry https://npm.xeditor.com:4873

  2. Switch into the directory where you want to install Xeditor:

    cd myNewXeditor

  3. Get Xeditor package.

    npm pack @xeditor/xeditor-demo --registry https://npm.xeditor.com:4873

  4. Decompress downloaded folder.

  5. Switch into new package folder.

    cd package

  6. Install the packages dependencies using npm.

    npm install --registry https://npm.xeditor.com:4873

  7. Start the demo application.

    npm run start:develop

The demo package is now up and running. Enjoy!

Customize and build

Now that we are up and running, let's make a few changes. In this example, we will change the mode of Xeditor to be "annotate", which means that the user would only be able to make comments. This is useful if you have a review team and do not want them to edit the content directly. We'll code this directly in the file, but it could also be sent as a parameter from your CMS. This way, each user role in the CMS could trigger a different mode of Xeditor.

Note

You should never edit the dist folder, which is the folder served to the browser. Files in this folder are built automatically with Xepack when you run start:develop The sources of this folder come from the static, src, and node_modules folders. For more on building see Xepack.

  1. Open the file src/js/config/attributes.js.
  2. At the line schema: 'demo' add a comma.

    schema: 'demo',

  3. Immediately after the comma, insert a new line and add the following code:

    editorMode: 'annotate'

  4. Start the application.

    npm run start:develop

You should now see Xeditor with the toolbar disabled and only the ability to add comments.

Integration

Xeditor makes integration simple by providing APIs that connect the backend with the frontent. For example, in our demo package you will find the following line code in src/js/config/urls.js

documentURL: '//127.0.0.1:3000/editor/load',

In order to load your own document, you simple write your own service (in any programming language you need) and pass it back to documentURL. Our demo packages uses node.js to manage the load service, which you can find in node_modules/@xeditor/server-js. You can use this package as a starting point (downloadable separately at npm pack @xeditor/server-js) or write your own. If you use our server-js files, you should copy it to a new location before editing the following lines to incorporate your own servies:

// add load url
app.post('/editor/load', function (req, res) {
    // get parameters
    const schema = req.body.schema || 'demo@0.0';
    const file = req.body.file || 'default';

    console.log(`LOAD '${schema}/${file}'`);

    // write header
    res.setHeader('Content-Type', 'text/xml');

    getXml(schema, file, (err, data) => {
        if (err) {
            // invalid string
            res.status(500).end('No file found. Invalid schema or file');
            return;
        }
        res.end(data);
    });
});     

For more information see Server setup and Blackbox.

Next steps

Now that you have the Xeditor application up and running, you have a few options.

Learn Xeditor with the demo package. You can continue to modify files in the package in order to customize Xeditor.

Download pre-built package. You can download one of our other packages, such as DITA.

Download clean Xeditor package. You can download our clean version and see our Configuration guide so that you can start building your own version of Xeditor from scratch.