Skip to content

Configuration

Modify, customize, and extend Xeditor.

Start with clean package

You can build Xeditor from scratch by downloading the clean package using. Following the instructions to install Xeditor but get @xeditor/xeditor instead of @xeditor/xeditor-demo. This version will not contain any plugins.

Folder and file structure

The only files that will be updated with npm update are contained in /node_modules.

Folder/file Customizable (y/n) Description
/dist n Contains built Xeditor package for deployment. Generated with xepack.
/node_modules n Distributed Xeditor packages, tools, dependencies, and pre-configured schemas.
package-lock.json n Npm dependencies. Generated with npm install.
package.json y Npm info file (contains information like dependencies, used versions, project name).
/src y Contains the subfolder /js/config. This includes all JavaScript files necessary to build Xeditor (e.g., dialogs, plugins, roles, toolbars, schema config, etc.).
/WEB-INF y Contains /xsl, /xsd, and /xml input files.
/static y Constains static files for CSS, phrases, and HTML.
xeblackbox.config.js y Configuration for blackbox.
xepack.config.js y Configuration for xepack build tool in order to generate /dist. Optional and downloaded separately from core Xeditor package. Automatically included in pre-configured packages (demo, DITA, etc.).

Schema configuration

This chapter describes how to transfer your own schema to Xeditor and configure Xeditor accordingly.

Converting DTDs into XSDs

Xeditor configuration tools only read from XSDs. DTDs must be converted to XSDs in order to properly set up Xeditor.

  1. Download the package trang-20081028.zip. It can be downloaded here: http://www.thaiopensource.com/relaxng/trang.html.
  2. Use the command line to navigate to the unzipped Trang package: cd *folder*
  3. Note

    Before running command line code you will need to adjust your file path depending on where you unzipped Trang and have your DTDs located.

    Enter the following on command line:

    java -jar trang.jar C:\Path\to\sourceDirectory\file.dtd C:\Path\to\destinationDirectory\file.xsd

Preconfigure Xeditor configuration

In order to prevent unnecessary changes on the generated Xeditor configuration, you can also add additional information to elements. This information will be used in the generation process and will be included in the generated result.

Generate info XML file

This process uses pregenerate_info.xsl to automatically generate the info.xml file needed to Assign Roles. This process is optional, but recommended in order to avoid manully creating each element in info.xml.

  1. Download the Xeditor generation tool xetypesgen: >npm pack @xeditor/tool-xetypesgen --registry https://npm.xeditor.com:4873.
  2. Decompress downloaded package.
  3. Run the XSL using Saxon.

    java -jar SAXONJAR=pathToSaxon\saxon9he.jar step1_empty.xml help\pregenerate_info.xsl > output\elements.xml

The info.xml file will be created in /output/.

Role definition

Every element in a schema must be assigned a role, which defines properties and governs behavior for that element in Xeditor. When generating a new schema configuration, the roles are defined in the info.xml file. Xeditor comes with predefined roles, but customer roles may be created in src/js/config/roles.js. All of the available available properties are listed in roles.js.

Note

For pre-defined DITA roles see DITA Roles.

The following pre-defined roles are available:

Ext.ux.xeditor.Config.setConfigs({
    'roles:xeditor.default.base': {
        tag: 'div',
        labeled: false,
        splitable: true,
        mergeable: false,
        recursiveMerge: false,
        validate: true,
        insertSpaceAfter: true,
        showInBreadcrumb: true,
        showInContextMenu: true,
        showInAttributesPanel: true,
        showInsertMenu: false,
        showInInsertMenu: false,
        showChangeMenu: false,
        showInChangeMenu: false,
        showInSearchField: true,
        showInTagView: null,
        moveSelectionType: 'end',
        siblingToRemove: false,
        containerToMerge: false,
        removeIfEmpty: false,
        breakLevel: false,
        wrapPath: false,
        wholeElement: true,
        documentSplitBoundary: false,
        isInline: false,
        isLineBreak: false,
        isEditable: true,
        isRemovable: true,
        preserveWhitespaces: false
    },

    'roles:xeditor.default.container': {
        extend: 'roles:xeditor.default.base',
        mergeable: true,
        recursiveMerge: true,
        showInsertMenu: true,
        showInInsertMenu: true,
        showChangeMenu: true,
        showInChangeMenu: true,
        containerToMerge: true,
        removeIfEmpty: true,
        breakLevel: true,
        documentSplitBoundary: true
    },

    'roles:xeditor.default.inline': {
        extend: 'roles:xeditor.default.base',
        mergeable: true,
        recursiveMerge: true,
        insertSpaceAfter: false,
        moveSelectionType: 'none',
        isInline: true
    },

    //////////////////////////////

    'roles:xeditor.container': {
        extend: 'roles:xeditor.default.container',
        cssClass: 'xe-default-container'
    },

    'roles:xeditor.inline': {
        extend: 'roles:xeditor.default.inline',
        cssClass: 'xe-default-inline'
    },

    'roles:xeditor.inlineContainer': {
        extend: 'roles:xeditor.default.inline',
        cssClass: 'xe-default-inlineContainer',
        insertSpaceAfter: true
    },

    'roles:xeditor.text': {
        extend: 'roles:xeditor.default.inline',
        tag: 'span',
        cssClass: '',
        showInBreadcrumb: false,
        showInContextMenu: false,
        showInAttributesPanel: false,
        showInSearchField: false
    },

    'roles:xeditor.lineBreak': {
        extend: 'roles:xeditor.default.inline',
        cssClass: 'xe-default-linebreak',
        splitable: false,
        mergeable: false,
        recursiveMerge: false,
        insertSpaceAfter: true,
        siblingToRemove: true,
        isInline: false,
        isLineBreak: true
    },

    'roles:xeditor.superContainer': {
        extend: 'roles:xeditor.default.container',
        cssClass: 'xe-default-chapter',
        recursiveMerge: false
    },

    'roles:xeditor.masterContainer': {
        extend: 'roles:xeditor.default.container',
        cssClass: 'xe-default-chapter',
        splitable: false,
        mergeable: false,
        recursiveMerge: false,
        containerToMerge: false,
        removeIfEmpty: false,
        breakLevel: false
    },

    'roles:xeditor.mediaBlock': {
        extend: 'roles:xeditor.default.container',
        cssClass: 'xe-default-media',
        splitable: false,
        mergeable: false,
        recursiveMerge: false,
        showInInsertMenu: false,
        showChangeMenu: false,
        showInChangeMenu: false,
        siblingToRemove: true,
        containerToMerge: false,
        removeIfEmpty: false,
        breakLevel: false,
        wholeElement: false
    },

    'roles:xeditor.media': {
        extend: 'roles:xeditor.mediaBlock',
        cssClass: 'xe-default-media',
        insertSpaceAfter: false,
        showInsertMenu: false,
        moveSelectionType: 'none',
        wholeElement: true,
        documentSplitBoundary: false
    },

    'roles:xeditor.list': {
        extend: 'roles:xeditor.default.container',
        tag: 'ul',
        cssClass: 'xe-default-unorderedList',
        recursiveMerge: false
    },

    'roles:xeditor.listItem': {
        extend: 'roles:xeditor.default.container',
        tag: 'li',
        cssClass: 'xe-default-listItem',
        showChangeMenu: false,
        showInChangeMenu: false,
        documentSplitBoundary: false
    },

    'roles:xeditor.table': {
        extend: 'roles:xeditor.default.container',
        tag: 'table',
        cssClass: 'xe-default-table',
        splitable: false,
        mergeable: false,
        recursiveMerge: false,
        showInsertMenu: false,
        showInInsertMenu: false,
        showChangeMenu: false,
        showInChangeMenu: false,
        containerToMerge: false,
        removeIfEmpty: false,
        breakLevel: false
    },

    'roles:xeditor.tableCaption': {
        extend: 'roles:xeditor.table',
        tag: 'caption',
        cssClass: 'xe-default-tabCaption',
        showInsertMenu: true,
        showInInsertMenu: true,
        removeIfEmpty: true,
        documentSplitBoundary: false
    },

    'roles:xeditor.tableColGroup': {
        extend: 'roles:xeditor.table',
        tag: 'colgroup',
        cssClass: 'xe-default-hidden',
        showInSearchField: false,
        wholeElement: false,
        documentSplitBoundary: false
    },

    'roles:xeditor.tableCol': {
        extend: 'roles:xeditor.table',
        tag: 'col',
        cssClass: 'xe-default-hidden',
        showInSearchField: false,
        wholeElement: false,
        documentSplitBoundary: false
    },

    'roles:xeditor.tableHead': {
        extend: 'roles:xeditor.table',
        tag: 'thead',
        cssClass: 'xe-default-tabHead',
        showInSearchField: false,
        wholeElement: false,
        documentSplitBoundary: false
    },

    'roles:xeditor.tableBody': {
        extend: 'roles:xeditor.table',
        tag: 'tbody',
        cssClass: 'xe-default-tabBody',
        showInSearchField: false,
        wholeElement: false,
        documentSplitBoundary: false
    },

    'roles:xeditor.tableFoot': {
        extend: 'roles:xeditor.table',
        tag: 'tfoot',
        cssClass: 'xe-default-tabFoot',
        showInSearchField: false,
        wholeElement: false,
        documentSplitBoundary: false
    },

    'roles:xeditor.tableRow': {
        extend: 'roles:xeditor.table',
        tag: 'tr',
        cssClass: 'xe-default-tabRow',
        showInSearchField: false,
        wholeElement: false,
        documentSplitBoundary: false
    },

    'roles:xeditor.tableCell': {
        extend: 'roles:xeditor.table',
        tag: 'td',
        cssClass: 'xe-default-tabCell',
        splitable: false,
        showInInsertMenu: false,
        showInSearchField: false,
        containerToMerge: false,
        removeIfEmpty: false,
        breakLevel: false,
        wholeElement: false,
        documentSplitBoundary: false
    },

    'roles:xeditor.tableHeadCell': {
        extend: 'roles:xeditor.tableCell',
        tag: 'th',
        cssClass: 'xe-default-tabHeadCell'
    },

    'roles:xeditor.empty': {
        extend: 'roles:xeditor.default.inline',
        cssClass: 'xe-default-empty',
        splitable: false,
        mergeable: false,
        recursiveMerge: false,
        insertSpaceAfter: true,
        showChangeMenu: true,
        moveSelectionType: 'none',
        siblingToRemove: true,
        isInline: false
    }
});

Assign roles

In addition to the XSD schema, the elements from different roles have to be assigned. The role assignment takes place in a XML file. This steps is however optional. The schema can also be generated without the file info.xml. In This case, the roles need to be added later in the generated schema.

  1. Create new XML file.
  2. Name the file info.xml.
  3. Note

    All elements must be assigned a role.

    Place all elements in your schema and assign corresponding roles.

    <xedin:elements xmlns:xedin="http://xpublisher.com/xeditor/config/info"> <xedin:element name="content" role="xeditor.masterContainer"/> <xedin:element name="heading" role="xeditor.container"/> <xedin:element name="p" role="xeditor.container"/> </xedin:elements>

Related information

Role definition

Roles and attributes

Roles and attributes

In addition to the roles also attributes can be assigned in the file info.xml.

In this example an emptyText attribute is used. It defines a placeholder text, to which you can assign content in the file phrases.js. This text is then displayed in Xeditor instead of an empty element. This function can be used to specify which content needs to be added in the corresponding element.

Example of info.xml with @attribute definition:

<xedin:elements xmlns:xedin="http://xpublisher.com/xeditor/config/info">
    <xedin:element name="content" role="xeditor.masterContainer"/>
    <xedin:element name="heading" role="xeditor.container" emptyText=”global_phrases[‘xeditor.tags.heading’]"/>
    <xedin:element name="p" role="xeditor.container"/>
</xedin:elements>

For further examples of configuration options you may see the sample file that was used to generate the demo.

Configure MathML and SVG

Xeditor offers support for MathML and SVG. Elements from those namespaces will not be handled as other elements, as editing them without any special tools isn't really user friendly. Therefore, Xeditor replaces elements from those namespaces with it’s own container, which will display and preserve them. If you also purchased a formula editor, like WIRIS, you also have the possibility to edit and create formulas. In order to handle those elements properly, Xeditor needs to know the used MathML and SVG namespace URI. if your schema uses MathML and/or SVG follow these instructions.

  1. Open the file nsinfo.xml located in /input/of the Xeditor types generator tool.
  2. Activate MathML and/or SVG support by setting the attribute “enabled” of the corresponding namespace element to true.
  3. Enter your used MathML namespace URI in the attribute “namespace”.
  4. Enter your used SVG namespace URI in the attribute “namespace”.

    <xednsin:namespaces xmlns:xednsin="http://xpublisher.com/xeditor/config/namespaceinfo"> <xednsin:namespace type="mathml" enabled="true" namespace="http://www.w3.org/1998/Math/MathML"/> <xednsin:namespace type="svg" enabled="true" namespace="http://www.w3.org/2000/svg"/> </xednsin:namespaces>

  5. Note

    You only need to do the following for SVG.

    Open the file contenttoeditor.xsl located within /WEB-INF/xsl/.

  6. Search for the marker “SVG container”.

  7. Remove the comment marks around the template.
  8. Open the file types_overrides.js located in /src/js/config/ of your Xeditor project.
  9. Search for “Configuration for SVG element” and remove the comment marks around the configuration.

Create JavaScript schema definition

Create JavaScript schema definition taking XSD files and info.xml file as inputs.

  1. Download the Xeditor tool xetypesgen which will generate your Xeditor configuration based on your XSDs.

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

  2. Decompress downloaded package.

  3. Note

    If you have several XSD schemas, these will be recognized accordingly from the transform files and collected in the output file. No further adjustments are necessary.

    Copy XSDs and info.xml in /input folder of downloaded tool.

  4. Compile ConfigProcess.java.

    1. Use command line to navigate to project folder of downloaded tool.
    2. Enter: javac ConfigProcess.java. File ConfigProcess.class will be created.
  5. Open either and ensure correct Saxon path.

    SAXONJAR=/opt/SaxonHE9-5-1-5J/saxon9he.jar

  6. Execute either generate.sh or generate.bat. File result.js will be created in /output.

  7. Copy entire content of result.js into the types.js file of your Xeditor project located in /src/js/config/types.js

Related information

Generate MathML and SVG

Adjust Xeditor schema configuration

Adjust phrases

Xeditor contains a separate file to manage the schema specific phrases. Additional files can be created for new languages or naming conventions. Two files are included by default in Xeditor for English and German (en.js and de.js). The files are located in /static/phrases/.

  1. Open respective German or English .js file.
  2. Add phrases for your schema.

    ``` (function($) { $['xeditor.tags.ELEMENTNAME'] = 'Element name'; })(global_phrases);

    ```

Define CSS

Each pre configured role of Xeditor, comes along with a default CSS class that will be set on each element. Therefore, each element that has a proper role assigned to will already have have styling that matches the role of the element.

If you want to change the CSS class that will be set on a certain element you can youse the property roleOverride for this. Best practis is to place this overrides in your types_overrides.js file. A override may look like this:

module.exports = {
    apply: function(types) {
        types.ELEMENTNAME.roleOverride = {
            cssClass: 'THECLASSTOUSE'
        };
    }
};

Available default CSS classes can be found within the file core.css to be found in /dist/css/.

Additionaly, you can style elements individually. This can be done within the file editor.css to be found in /static/css/.

Since the element name within Xeditor is available only in the attribute of the HTML element, the elements are also addressed via attributes.

Example: CSS configuration of the elements chapter and bold.

*[data-type='chapter'] {display: block; padding: 0 10px 0 10px;}

*[data-type='bold'] {display: inline; font-weight: bold;}
Generate CSS files

Xeditor provides an optional process to automatically create a css file by using /xetypesgen/help/pregenerate_css.xsl. The file contains all used elements of your schema. The generated css file contains no further style information. You still have to assign style information to the elements.

  1. If not already done, download the Xeditor tool xetypesgen

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

  2. Decompress downloaded package.

  3. Switch into the location of downloaded package.
  4. Run XSL with Saxon.

    java -jar SAXONJAR=pathToSaxon\saxon9he.jar step1_empty.xml help\pregenerate_css.xsl > output\elements.css

New css file will be created in /output.

Whitespaces

Per default, Xeditor collapses whitespaces in order to display pretty printed XML files properly. However, certain elements, like code block elements, should preserve whitespaces.

Preserve whitespaces: using role

Xeditor roles offer a property called preserveWhitespaces. Per default, this property is set to false. If you want a whole role to preserve whitespaces, this property can be set to true. If only certain elements should preserve whitespaces, the property can be changed for certain elements individually. This can be done using the property roleOverride of the element.

Example using types_overrides.js:

module.exports = {
    apply: function(types) {
        types.ELEMENTNAME.roleOverride = {
            preserveWhitespaces: true
        };
    }
};
Preserve whitespaces: using attributes

Some schemas use attributes to indicate that whitespaces should be preserved. In order to support this, Xeditor needs to know the attributes name and its value.

  1. Open the file index_editor_attributes.jsp.
  2. Add preserveWhiteSpaceAttribute and set its value to the name of the attribute of your schema.
  3. Add preserveWhiteSpaceAttribute and set its value to the attribute value that indicates whitespaces should be preserved.

Toolbar configuration

Gives general information about Xeditor toolbar and how to configure it.

Internal toolbar

This chapter describes how to configure the internal toolbar of Xeditor.

General information

The new toolbar definition gives you the following benefits:

  • Useing predefined toolbar buttons by adding an alias
  • Extending existing button types (insert, inline, etc)
  • No update for future Xeditor versions necessary

This means, you can easily reuse predefined Xeditor core buttons (like save, history buttons, and so on).

Also, buttons for inserting elements from your schema are easily created by extending the existing default insert button.

The following predefined core buttons are available:

Button alias Button type
'button:xeditor.save' Save button
'button:xeditor.copy' Copy button
'button:xeditor.cut' Cut button
'button:xeditor.paste' Paste button
'button:xeditor.pasteexternal' Paste external content button
'button:xeditor.pasteoffice' Paste MS Word content button
'button:xeditor.undo' Undo button
'button:xeditor.redo' Redo button
'button:xeditor.find' Find&replace dialog button
'-' Weak separator (only one will be shown, regardless how many will be added)
'=' Separator (will always be shown)

Note

Some plugins may add additional predefined buttons. For example, the comment plugin will provide a button for creating comments.

Additionally, the following default button templates, which may be extended, are available:

Template alias Template action
'button:xeditor.insert' Insert action
'button:xeditor.insertOrEdit' Insert or edit action
'button:xeditor.convert' convert action
'button:xeditor.convertOrInsert' Convert or insert action

Button templates can be extended and therefore adjusted to your schema. The data property of the button can contain information regarding the toolbar type and the element type that should be inserted. You can also add the icon and phrase that should be used.

For example, the insert button xeditor.insert can be extended like this:

{
    extend: 'button:xeditor.insert',
    icon: 'fa-header',
    contextSensitive: true,
    tooltip: global_phrases['yourPhrase.name'],
    data: {
        elementType: 'yourElement'
    }
}

Note

Some plugins may add additional button templates.

A toolbar definition may look like this:

module.exports = {
    createToolbarConfig: function(editor) {
        return [
            'button:xeditor.save',
            'button:xeditor.copy',
            'button:xeditor.cut',
            'button:xeditor.paste',
            'button:xeditor.pasteexternal',
            'button:xeditor.pasteoffice',
            '-',
            'button:xeditor.undo',
            'button:xeditor.redo',
            '-',
            'button:xeditor.find',
            '-',
            {
                extend: 'button:xeditor.inlineformat',
                icon: 'fa-bold',
                tooltip: global_phrases['xeditor.tags.bold'],
                data: {
                    elementType: 'bold'
                }
            },
            '-',
            {
                extend: 'button:xeditor.insert',
                icon: 'fa-bookmark',
                tooltip: global_phrases['xeditor.tags.chapter'],
                data: {
                    elementType: 'chapter'
                }
            },
            [...]
        ]
    }
};

Howto configure the toolbar

  1. Open the file toolbar.js located in /src/js/config/.
  2. Add your buttons to the returned Array of the function createToolbarConfig.
    1. Make sure to use predefines buttons, if possible.
    2. Extend existing button templates, if possible.

External toolbar

This chapter describes how to configure the external toolbar of Xeditor.

General information

Since Xeditor v5.0, the external toolbar, usually containing drop down menus, is no longer within the same file, but got separated into the new file external_toolbar.js located in /src/js/config/.

The configuration is very similar to the normal internal toolbar, as also predefined buttons can be used.

A external toolbar definition may look like this:

Note

This configuration requires the installation and configuration of the following plugins: spellchecker plugin, comment plugin, changetracker plugin, tagvisualizer plugin.

module.exports = {
    createExternalToolbarConfig: function(editor) {
        return {
            type: 'menu',
            items: [
                {
                    text: global_phrases['xeditor.ribbon.review'],
                    items: [
                        'button:xeditor.spellchecker.configure',
                        'button:xeditor.spellchecker.spellcheck',
                        'button:xeditor.spellchecker.remove',
                        '-',
                        'button:xeditor.comment',
                        'button:xeditor.comment.previous',
                        'button:xeditor.comment.next',
                        '-',
                        {
                            extend: 'xeditor.changetracker',
                            checked: false
                        },
                        'button:xeditor.changetracker.previous',
                        'button:xeditor.changetracker.next',
                        'button:xeditor.changetracker.commit',
                        'button:xeditor.changetracker.revert',
                        '-',
                        'button:xeditor.tagvisualizer'
                    ]
                }
            ]
        }
    }
};

How to configure the external toolbar

  1. Open the file external_toolbar.js located in /src/js/config/.
  2. Add your buttons to the return object of the function createExternalToolbarConfig. Make sure to use predefined buttons and extend existing button templates if possible.

Transformation

As Xeditor holds a HTML representation of your XML, your content needs to be transformed from XML into HTML when loading. When saving, the Xeditor HTML also needs to be transformed back to XML.

The two files that manage this transformation are contenttoeditor.xsl (XML->HTML) and editortocontent.xsl (HTML->XML). The XML file is validated against the original schema.

Generation of transformation files

Xeditor offers a tool for generating the transformation files contentoeditor.xsl and editortocontent.xsl.

  1. Note

    The file contenttoeditor.xsl already contains often used templates. In most cases, it should be sufficient to add your elements to existing templates.

    Download the tool by running the following command:

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

  2. Decompress downloaded package.

Transform XML into HTML

Upon loading, Xeditor transforms the input XML file into an HTML representation. In the demo configuration, this file is located at/WEB-INF/xsl/contenttoeditor.xsl. But you can place it as any location if you adjust your Blackbox/server configuration accordingly. There are corresponding templates for all the Element Groups.

  1. Note

    The file contenttoeditor.xsl already contains often used templates. In most cases, it should be sufficient to add your elements to existing templates.

    Open file contenttoeditor.xsl.

  2. For each template representing each element group, remove demo elements and replace them with your own.

    <!-- mixed --> <xsl:template match="your mixed elements separated by vertical bar "> <div data-type="{local-name()}"> <xsl:apply-templates select="@*"/> <xsl:apply-templates select="node()"/> <xsl:if test="not(* | text())"> <span data-type="text">&#8203;</span> </xsl:if> </div> </xsl:template>

Element groups

In the file contenttoeditor.xsl all elements in use must be entered in corresponding groups. As a rule, the existing groups should be sufficient to operate properly. Only occasionally and in special cases is it necessary to create new groups. Groups are:

  • Structure: elements that contain sub-elements, but no direct input (text). Example: body.
  • Mixed: elements that contain sub-elements, but that can also contain direct input (text). Example: title, paragraph.
  • Inline: elements that function as markup tag elements. Example: bold, italic.
  • Empty: elements that have no content. Example: linebreak.

Transform HTML into XML

Upon saving, Xeditor transforms the created HTML content back to proper XML. In the demo configuration, this file is located in /WEB-IF/xsl/editortocontent.xsl. But you can place it at any location of you adjust your Blackbox/server configuration accordingly. In most cases, the file is already properly configured and should work fine.

  1. Change the file editortocontent.xsl if one of the following conditions are met:
    • You want to add additional namespaces to your resulting XML
    • You want to rename certain elements
    • You want to remove certain elements
  2. Add your required XSL templates.

Paste from office

Xeditor offers the functionality to paste Word content directly into Xeditor. Pasted content will be transformed into proper Xeditor HTML, and will therefore also be included in your saved XML.

This chapter will describe how to configure the transformation file for your schema.

Transformation step 1

This transformation step will transform the pasted Word content into proper Xeditor HTML. Therefore it is importat that the elements pasted content will be transformed to exist within your schema definition.

  1. Open the file pastetoeditorfirst.xsl located in /WEB-INF/xsl.
  2. Note

    You can identify the elements that pasted content will be transformed into by the data-type attribute.

    Configure the transformation result to match to your schema. This means you have to adjust the XSL target elements to the element name of your schema definition. Example: The following template will transform a pasted unordered list. Therefore, you have to put the name of the unordered list element into the template

    <xsl:template match="ul"> <ul data-type="list_unordered"> <xsl:apply-templates select="li"/> </ul> </xsl:template>

  3. Repeat this step for all predefined templates.

Transformation step 2

This transformation step is used to clean up the result of the first transformation step. It will for example add text nodes to empty elements that require text, like inline elements.

  1. Open the file pastetoeditorsecond.xsl located in /WEB-INF/xsl.
  2. Add elements that require text to the template for adding empty text. The template looks like this

    <!-- add empty text to empty elements --> <xsl:template match=""> <xsl:copy> <xsl:copy-of select="@*"/> <xsl:choose> <xsl:when test="not(* | text())"> <span data-type="text"></span> </xsl:when> <xsl:otherwise> <xsl:apply-templates select="*"/> </xsl:otherwise> </xsl:choose> </xsl:copy> </xsl:template>

Shortcuts

The configuration of each shortcut is stored within an array named “namedShortcuts”. Each shortcut contains a name it is addressed by and the actual keys that have to be pressed to trigger it. Also, it contains additional information about the behavior of the shortcut.

The Keycode defines which key has to be pressed. Keycodes may be found here: keycode.

The properties shiftKey, ctrlKey and altKey define whether the keys have to be pressed or not.

For example, the shortcut for saving is configured as follows.

module.exports = [
    {
        name: 'save',
        preventDefault: true,
        stopListener: true,
        shortcut: {
            keyCode: 83,
            shiftKey: false,
            ctrlKey: true,
            altKey: false
        }
    }
]

Default shortcuts

Xeditor contains the following shortcuts.

Action Result
ctl+f Open search and replace
ctl+z Undo
ctl+y Redo
Esc End user input (e.g., characters with accents)

Additionaly, the following shortcuts are configured in the demo configuration and are commonly used.

Action Result
ctrl+space Show insert menu
ctrl+s Save
ctrl+b Bold
ctrl+i Italic
ctrl+u Underline

Create custom shortcut

Creating a new shortcut within Xeditor is split into two parts. First, we have to create the shortcut and assign the keys used for triggering the shortcut to it. In order to do so, proceed as follows:

  1. Open the file shortcuts.js located in /src/js/config/.
  2. Add the following code to create a custom shortcut.

    { name: 'testshortcut', preventDefault: true, stopListener: true, shortcut: { keyCode: 65, shiftKey: false, ctrlKey: true, altKey: false } }

  3. Open the file init.js within /js/config/.

  4. Add a listener for the namedshortcut event to initEditor if it doesn't exist yet. Example:

    editor.eventManager.on('namedshortcut', editor.configObj.configData.onEventManagerNamedShortcut);

  5. Open the file listeners.js within /js/config/.

  6. Add the code to be executed when the shortcut is used for just created event listener. Your logic may look like this:

    /** * Event listener for namedshortcut event of eventmanager */ onEventManagerNamedShortcut: function(editor, eventManager, name, eOpts) { // custom code if (name === 'testshortcut') { alert('triggered custom shortcut'); } }

You now have created a custom shortcut.

Xeditor modes

Additionaly to the default edit mode, Xeditor offers two different modes for reviewing documents. One full readOnly mode in which no changes can be performed and one mode for annotating documents, in which only comments can be set. The modes can either be set using the Xeditor config editorMode within /src/js/config/attributes.js or during runtime using editor.switchEditorMode(). The following three modes are available:

  • edit (default)
  • view
  • annotate

APIs

Xeditor ExtJS (v6.2.1) API

Xeditor Service API

Blackbox Service API.

NPM packages

A complete list of NPM packages and addiitonal documentation can be found at npm.xeditor.com:4873

License validation

Xeditor contains a mechanism for determining a valid license key. It is delivered via a file called license.txt. This file needs to be placed within /static/ of your Xeditor project folder.

Xeditor uses session-IDs in order to track users. The session-IDs ensure that even multiple instances of Xeditor within the same browser count as one active session. To protect privacy, we do not send any user names, roles, etc.

For enterprise license options or offline instances of Xeditor, the key we provide ensures that no check is performed.