Edit online

Integrating Web Author with Your Content by Creating Custom Frameworks

You can customize Web Author to make it simple for everyone to write structured content and still adhere to your project conventions. This topic provides details about reusing frameworks between the standalone versions of Oxygen and Web Author, how to create customized frameworks, how to test and upload your customization, and other framework customization tips.

Examples of Framework Customization Use-Cases

Document Schema
Web Author supports any XML-based schema in any schema language. It also offers built-in support for DITA, DocBook, TEI and XHTML.
Add Support for a New XML Vocabulary
You can customize Web Author to work with any XML-based document type. For example, you can customize Web Author to work with a DITA specialization.
Authoring Experience
You can configure how documents are rendered in Web Author or display inline form-controls to allow users to edit attribute values.
Business Rules

You can configure the automatic validation to use Schematron to enforce various business rules and propose solutions for them. For more information, see the Schematron Quick Fixes (SQF) section in the Oxygen XML Editor User Manual. There is an interesting Blog post written on this subject available at: https://blog.oxygenxml.com/topics/SchematronBCs.html.

There is also a public project in the Oxygen GitHub account pages that offers guidance and instructions for integrating an Intelligent Style Guide for imposing business rules and assisting the content authors. You can download the project and try it for yourself at: https://github.com/oxygenxml/integrated-styleguide.

Document Templates
You can specify document templates that users can choose from when creating a new document.
Embedded Formats
Web Author supports embedded formats such as MathML, SVG, videos, and others using plugins or flexible form-controls. Also, support for embedded formats can be implemented by third parties. For example, WIRIS provides a plugin that can be used to edit MathML equations in a visual way.

Reusing Frameworks Between Oxygen XML Editor/Author and Web Author

Custom frameworks that are designed for documentation purposes can be reused interchangeably between Oxygen standalone distributions and the Oxygen XML Web Author. However, some fine-tuning might be necessary to maximize the editing experience for your content authors. The advantages of using a common framework include:
  • Uniform experience across multiple Oxygen XML Editor/Author distributions.
  • Ability to reuse previously developed frameworks.
  • Many of the customized items that are added to your framework in the Oxygen XML Editor/Author standalone distribution also carry over to Oxygen XML Web Author. For example, items that are added to the list of proposals for the Content Completion Assistant will appear in both distributions.

How to Create a Custom Framework (Document Type)

You can create a custom framework by extending an existing one:
  1. In a location where you have full write access, create a folder structure similar to this: custom_frameworks/dita-extension.
  2. Open a standalone version of Oxygen XML Editor/Author.
  3. Open the Preferences dialog box (Options > Preferences) and go to Document Type Association > Locations. In this preferences page, add the path to your custom_frameworks folder in the Additional frameworks directories list.
  4. Go to the Document Type Association preferences page and select an existing framework configuration and use the Extend button to create an extension for it.
  5. Give the extension an appropriate name (for example, DITA - Custom), select External for the Storage option, and specify an appropriate path (for example, path/to/.../custom_frameworks/dita-extension/dita-custom.framework).
  6. Make your changes to the extension. There is a large variety of ways to customize your extended framework. These are just some of the ways:
  7. Click OK to close the dialog box and then OK or Apply to save the changes.
  8. Create an archive that contains your custom framework folder that you created in the first step of this procedure. The archive should contain exactly one folder on the first level. You will need this archive structure to upload the framework to Web Author.

Testing a Custom Framework Using the Oxygen XML Web Author Test Server Add-on

An add-on (for Oxygen XML Editor/Author) is available to help you test custom frameworks for Web Author. The Oxygen XML Web Author Test Server add-on allows you to quickly preview and edit your opened XML documents in a local Web Author Test Server that uses the same framework that is associated with the document. The server is installed and configured automatically so you do not need to package, deploy, or do any extra setup. This simplifies and speeds-up the process of creating, updating, and testing customizations (frameworks).

For details and instructions for using the test server add-on, see Oxygen XML Web Author Test Server Add-on.

Uploading a Custom Framework to Web Author

To upload a custom framework to your Web Author deployment, follow this procedure:
  1. Go to your Administration Page.
  2. Select Frameworks.
  3. Click Upload Framework and choose a framework to upload. You can enable the Validate frameworks option to trigger a process that validates the framework during the upload and also when the framework is loaded after a restart.
    Important:
    The framework should be a ZIP or JAR archive that contains exactly one folder. This folder should contain the framework descriptor file (with a .framework or .exf extension) and other supporting files. If the uploaded archive does not have this format you will receive an error that the upload was rejected. If the folder contains both a .framework and .exf file, the .framework file will be used.

    Step Result: The framework should appear in the list on this Frameworks page. Uploaded frameworks appear with a light green highlight so that you can identify them easily.

  4. Once you are finished with all of your changes, restart the server.

Adding JavaScript Code to a Framework

Frameworks can be configured to load custom JavaScript code in the web browser. The JavaScript files are loaded according to the following rules:
  • If your framework is defined as a .framework file (for example, the framework was created using the Document Type Configuration dialog box):
    • All the files in the web/ folder of the framework will be loaded in the browser in lexicographical order.
    • JavaScript files located in subfolders of the web folder will not be loaded.
    • If your framework is a framework extension, both the JavaScript files from the base framework and those from the extension will be loaded. To make it possible to override JavaScript files inherited from a base framework, if a file in the web folder of the extension framework has the same name as a file in the web folder of the base framework, only the file in the extension framework will be loaded.
  • If a framework is generated using a Framework Extension Script, multiple webResources can be specified:
    • The webResources will be loaded in the order they are specified in the .exf file.
    • If a folder is specified, all the JavaScript files in that folder will be loaded in lexicographical order.
    • If a file is specified (directly or indirectly) multiple times, it will be loaded only once (the last instance that was specified).
The framework's script needs to create an instance of sync.ext.Extension and register it in the sync.ext.Registry.extension field. For example:
class MyExtension extends sync.ext.Extension {
  /** @param {sync.api.Editor} editor */
  editorCreated(editor) {
    // ... 
  }
}
// Register the extension so that it will be notified when the editor is created.
sync.ext.Registry.extension = new MyExtension();
These files can contain code that calls the Web Author JavaScript API to implement custom editing actions. Some possible use cases include:
Tip:
Some tutorials are available for other use cases in the Oxygen XML Web Author Component API Documentation (in the Tutorials section).

Adding JavaScript Code to a Framework Extension

When adding JavaScript code to a framework extension, you may want to also inherit the customizations made by the base framework using JavaScript code.

For example, to create a DITA extension that removes the action to underline the selected text, follow these steps:

  1. Create an EXF file (for example my-framework.exf) with the following content:
    <?xml version="1.0" encoding="UTF-8"?>
    <script 
        base="DITA" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns="http://www.oxygenxml.com/ns/framework/extend"
        xsi:schemaLocation="http://www.oxygenxml.com/ns/framework/extend 
            http://www.oxygenxml.com/ns/framework/extend/frameworkExtensionScript.xsd">
    
      <name>My DITA extension</name>
      <description>My DITA extension</description>
      <priority>Normal</priority>
    
      <webResources inherit="all">
        <addEntry path="${frameworkDir}/my-framework.js"/>
      </webResources>
    </script>
  2. Create the my-framework.js file in the same folder with the following content:
    // Use the `sync.ext.WrapperExtension` class to wrap the original extension.
    class MyFrameworkExtension extends sync.ext.WrapperExtension {
      constructor(base) {
        super(base);
      }
      
      filterActions(actionsMap, editingSupport) {
        super.filterActions(actionsMap, editingSupport);
        // Remove the "underline" action.
        actionsMap.delete('underline');
      }
    }
    
    var originalExtension = sync.ext.Registry.extension;
    sync.ext.Registry.extension = new MyFrameworkExtension(originalExtension);
  3. Create a zip archive with the folder that contains the two files created above to obtain the framework.

Loading Static Resources from the Framework Directory

All the resources (such as images, HTML, or CSS files) found in the web sub-folder of the framework folder can be accessed from the web browser using a URL obtained by evaluating sync.ext.Registry.extensionURL in JavaScript. For example, a file located at <framework-folder>/web/resources/image.png can be accessed by the following URL:
sync.ext.Registry.extensionURL + 'resources/image.png'

When using a framework generated from a Framework Extension Script, the path appended to sync.ext.Registry.extensionURL (resources/image.png in the example above) is resolved against all the directories configured as webResource in the .exf file. If the file is present in multiple such folders, the last one is used.

Other Customization Tips

  • If you want to use CSS rules that only apply when the framework is used in the Oxygen XML Web Author, use the following media query:
    @media oxygen AND (platform:webapp) {
     ... 
    }
  • If the framework contains custom Author mode operations (Java implementations of the ro.sync.ecss.extensions.api.AuthorOperation interface), they can be enabled to be used by the Oxygen XML Web Author using the ro.sync.ecss.extensions.api.WebappCompatible annotation.

    If you plan to invoke a custom Author mode operation from the JavaScript code (as in this tutorial), the operation has to be annotated with ro.sync.ecss.extensions.api.webapp.WebappRestSafe.
    Warning:
    Operations annotated with ro.sync.ecss.extensions.api.webapp.WebappRestSafe can be invoked with user-supplied parameters. Use this annotation only for operations that are safe to execute with any parameter combination. For example, an action that would execute a process on the server based on a command-line script specified by the user is not safe.
    Note:
    Author mode operations that use Java Swing components to display a graphical interface are not compatible with the Oxygen XML Web Author and they should not be annotated.
  • The Oxygen XML Web Author continuously validates the XML documents using the default validation scenarios defined at framework level. Only the validation units that have the Automatic Validation option selected in the Edit Scenario dialog box that is accessed by editing a scenario in the Validation subtab when editing a document type.

Resources

For more information about customizing Web Author and frameworks, see the following resources: