Skip to content

Plugins

Add functionality while minimizing overhead.

Install and configure plugins

Each plugin can be installed using NPM and the command line in the context of your Xeditor project folder. For pre-configured packages (Demo, DITA, JATS, etc.) these are already installed, but they can still be configured.

  1. cd your-xeditor-project
  2. npm install @xeditor/name-of-plugin --save --registry https://npm.xeditor.com:4873
  3. Set configuration in /src/js/config/plugins.js

    module.exports = [ { /** * Place configuration of first plugin here */ }, { /** * Place configuration of second plugin here */ } ];

Plugin manager

npm install @xeditor/plugin-pluginmanager --save --registry https://npm.xeditor.com:4873

This plugin manages plugin listeners that are called by the same toolbar button. It ensures that the correct plugin will be called and therefore, the correct action will be performed. It is used to manage the indent/outdent buttons and accordingly the corresponding action of the list features plugin and the change element level plugin.

The demo configuration of the plugin looks like this:

{
    pluginId: 'pluginmanager',
    ptype: 'uxxeditorpluginmanager',
    pluginIds: ['changeelementlevel', 'listfeatures']
}

The configuration results in the changeelementlevel plugin and the listfeatures plugin to be managed by the pluginmanager plugin.

Plugin manager plugin API.

Acrolinx

npm install @xeditor/plugin-acrolinx --save --registry https://npm.xeditor.com:4873

The acrolinx plugin is used to make Acrolinx available in Xeditor.

Default configuration:

{
    pluginId: 'acrolinx',
    ptype: 'uxxeditoracrolinx',
        acrolinxConfig: {
            //See: https://cdn.rawgit.com/acrolinx/acrolinx-sidebar-demo/v0.3.52/doc/pluginDoc/interfaces/_src_acrolinx_libs_plugin_interfaces_.initparameters.html
            serverAddress: 'https://test-ssl.acrolinx.com/',

            //You'll get the clientSignature for your integration after a successful certification meeting.
            //See: https://support.acrolinx.com/hc/en-us/articles/205687652-Getting-Started-with-Custom-Integrations
            // clientSignature: 'SW50ZWdyYXRpb25EZXZlbG9wbWVudERlbW9Pbmx5',

            /**
            * This callback can be used to set the documentReference.
            * It is called in the moment when the document is checked.
            * The default value is window.location.href.
            * In a CMS the link to the article might be a good documentReference.
            * On other cases the full file name might be a good option.
            * @return {string}
            */
            getDocumentReference: function () {
                return window.location.href;
            }
    },
}

Acrolinx plugin API

Autosave

npm install @xeditor/plugin-autosave --save --registry https://npm.xeditor.com:4873

The autosave plugin is used to automatically save in configureable intervalls. Per default, it saves all 60000ms (1minute).

Default configuration:

{
    pluginId: 'autosave',
    ptype: 'uxxeditorautosave'
}

Autosave plugin API

Break helper

npm install @xeditor/plugin-breakhelper --save --registry https://npm.xeditor.com:4873

This plugin can be used for creating basic return handling. It can determine which element should be inserted after return was hit on a certain element.

Default configuration:

{
    pluginId: 'breakhelper',
    ptype: 'uxxeditorbreakhelper',
    helpers: [{
        levels: [1],
        checkTypes: ['_mathmlcontainer', 'med_image', 'med_video'],
        actionType: 'insert',
        insertType: 'text'
    },{
        levels: [1],
        checkTypes: ['heading', 'subheading', 'tab_table'],
        actionType: 'insert',
        insertType: 'p'
    }]
}

The configuration results in the following:

  • when return is hit in either _mathmlcontainer, med_image or med_video element, a new text node will be inserted
  • when return is hit in either heading, subheading or tab_table element, a new p element will be inserted

Break helper API

Change element level

npm install @xeditor/plugin-changeelementlevel --save --registry https://npm.xeditor.com:4873

This plugin adds the functionality to indent/outdent elements to Xeditor. It is mostly used for chapter like elements.

Note

For lists, Xeditor offers a separate plugin listfeatures.

Example configuration:

{
    pluginId: 'changeelementlevel',
    ptype: 'uxxeditorchangeelementlevel',
    enableContextMenu: true,
    elements: [{
        moveElementType: 'chapter',
        checkElementType: 'heading'
    }]
}

This configuration results in the following:

  • when a heading element is selected, the indent and outdent button will be enabled (if possible, outdent action is not enabled if selected element is already on first level)
  • as enableContextMenu config is set to true, corresponding entries will be added to the context menu
  • triggering the acton will indent/outdent the chapter element selected heading belongs to

The plugin also adds additional button templates, which can be used in your toolbar configuration.

Button Action
'button:xeditor.indent' Indents selected element
'button:xeditor.outdent' Outdents selected element

Change element level plugin API.

Change Tracker

npm install @xeditor/plugin-changetracker --save --registry https://npm.xeditor.com:4873

This plugin adds change tracking to Xeditor. It supports multiple users and recognizes textual changes as well as changes structural changes within the document.

Example configuration:

{
    pluginId: 'changetracker',
    ptype: 'uxxeditorchangetracker',
    fieldSetWidthDecrease: 37
}

The plugin also adds additional button templates, which can be used in your toolbar configuration.

Button Action
'button:xeditor.changetracker' Enables/disables change tracking
'button:xeditor.changetracker.previous' Selects previous change
'button:xeditor.changetracker.next' Selects next change
'button:xeditor.changetracker.commit' Accepts current change
'button:xeditor.changetracker.revert' Reverts current change

Structured track changes

Xeditor offers an advanced structural change tracking feature that is able to handle changes performed by multiple different users. This allows authors and reviewers to always have fully access to performed changes like:

  1. Inserted/removed block/inline elements
  2. Inserted/removed breaks
  3. Cutting/pasting elements
  4. Moving whole text blocks to different positions using the Table of Contents Plugin

In addtion, once the change tracking has been activated, it can be only turned off when all changes are accepted. Otherwise, turning off the change tracking would break the document.

How to use it

The track changes functionality uses several events that have to be fired by the code manipulating the document. Therefore, it is in the responsibility of the developer to fire appropriate events for custom code not included with Xeditor. Xeditor’s API will list on each method that manipulates the document whether the tracking events need to be fired manually or if they are already included in the core method.

Event (* = required) Description
Trackelementinsert if an element was inserted
Trackrangeinsert if a range of elements was inserted
Trackelementremove if an element was removed
Trackrangeremove if a range of elements or text was removed
Trackelementmove if an element was move
Trackelementsplit if an element was split
Trackelementwrap if an element was wrapped
Trackelementunwrap if an element was unwrapped
Trackelementclone if an element was cloned and should still contain the changes of the previous element
*Trackstart indicates the sart of the change action
*Trackend indicates the end of the change action

Example of insert element with change tracking:

// File: editor_config.js [FILE WITH YOUR CUSTOM CODE]
// Ext.ux.xeditor.Editor: editor
// Ext.ux.xeditor.Element: element

// break at the current position until the element is reached.
var breakResult = editor.document.breakUntil(element);
if (!breakResult) {
    return;
}

// create new child of type chapter
var child = editor.document.createElement("chapter");

// insert the element before the postNode
element.insertBefore(child, breakResult.postNode);

// fix state because may the insert was not valid
var fixResult = element.fixState();

// now track everything // start the tracking
editor.document.fireEvent("trackstart", editor, editor.document);

// track the breakUntil
editor.document.fireTrackingEventsForBreakUntilResult(breakResult);

// track the insert of the element
editor.document.fireEvent("trackelementinsert", editor, editor.document, child);

// track the fixState of the element
editor.document.fireTrackingEventsForElementFixResult(fixResult);

// end the tracking editor.document.fireEvent("trackend", editor, editor.document);

Example of remove element with change tracking:

// File: editor_config.js [FILE WITH YOUR CUSTOM CODE]
// Ext.ux.xeditor.Editor: editor
// Ext.ux.xeditor.Element: element

var parent = element.getParent();

// start the tracking
editor.document.fireEvent("trackstart", editor, editor.document);

// only remove element if tracking is disabled
if(!editor.isTrackingEnabled()){
    parent.removeChild(element);
}

// IMPORTANT:
// fire trackelementremove before calling fixState
editor.document.fireEvent('trackelementremove', editor, editor.document, element);

// fix state because may the remove is not schema aware
var fixResult = parent.fixState();

// track the fixState of the parent
editor.document.fireTrackingEventsForElementFixResult(fixResult);

// end the tracking
editor.document.fireEvent("trackend", editor, editor.document);

Change tracker plugin API.

Character picker

npm install @xeditor/plugin-characterpicker --save --registry https://npm.xeditor.com:4873

This plugin adds a character picker to Xeditor. It is used to insert special characters.

Example configuration:

{
    pluginId: 'characterpicker',
    ptype: 'uxxeditorcharacterpicker',
    characterImagePath: 'img/characters'
}

The plugin also adds additional button templates, which can be used in your toolbar configuration.

Button Action
'button:xeditor.characterpicker' Shows character picker dialog

Character picker plugin API.

Comment

npm install @xeditor/plugin-comment --save --registry https://npm.xeditor.com:4873

This plugins adds the comment feature to Xeditor. Users will be able to add comments to selected text sections.

Example configuration:

{
    pluginId: 'comment',
    ptype: 'uxxeditorcomment'
}

It should be placed in your plugin configuration file (plugins.js as default).

The plugin also adds additional button templates, which can be used in your toolbar configuration.

Button Action
'button:xeditor.comment' Creates new comment
'button:xeditor.comment.previous' Selects next comment
'button:xeditor.comment.next' Selects previous comment

Comment plugin API.

Demo Features

npm install @xeditor/plugin-demofeatures --save --registry https://npm.xeditor.com:4873

This plugin adds features meant for demo purposes to Xeditor. It currently only adds the user switch for Changetracking testing to Xeditor. It may add additional features in future versions. It is not meant for use in production.

Default configuration:

{
    pluginId: 'demofeatures',
    ptype: 'uxxeditordemofeatures'
}

Demofeatures plugin API

Footnote

npm install @xeditor/plugin-footnote --save --registry https://npm.xeditor.com:4873

This plugin adds basic footnote handling to Xeditor. Configured elements will collapse if not selected, and expand as soon as the cursor is placed in them.

The demo configuration of the plugin looks like this:

{
    pluginId: 'footnote',
    ptype: 'uxxeditorfootnote',
    elementTypes: ['footnote']
}

The configuration results in the following:

  • when element footnote is not selected, it will collapse and its content will be hidden
  • when element footnote is selected, it will expand and its content will be shown

Footnote plugin API.

HTML Table

npm install @xeditor/plugin-htmltable --save --registry https://npm.xeditor.com:4873

This plugin adds support for table actions to Xeditor. If configured, you can easily insert new rows/columns, delete them as well as merge and split table cells.

Example configuration:

{
    pluginId: 'htmltable',
    ptype: 'uxxeditorhtmltable',
    enableContextMenu: true,
    tableType: 'tab_table',
    captionType: 'tab_caption',
    headType: 'tab_head',
    bodyType: 'tab_body',
    footType: 'tab_foot',
    rowType: 'tab_row',
    cellType: 'tab_cell',
    headCellType: 'tab_headcell',
    colSpanAttribute: 'colspan',
    rowSpanAttribute: 'rowspan'
}

Note

The element names need to be adjusted to your schema.

The plugin also adds additional button templates, which can be used in your toolbar configuration.

Button Action
'button:xeditor.table.insertrowbefore' Insert row before current row
'button:xeditor.table.insertrowafter' Insert row after current row
'button:xeditor.table.deleterow' Delete current row
'button:xeditor.table.moverowup' Move row up
'button:xeditor.table.moverowdown' Move row down
'button:xeditor.table.insertcolumnbefore' Insert column before current column
'button:xeditor.table.insertcolumnafter' Insert column after current column
'button:xeditor.table.deletecolumn' Delete current column
'button:xeditor.table.movecolumnleft' Move current column left
'button:xeditor.table.movecolumnright' Move current column right
'button:xeditor.table.mergeright' Merge current cell right
'button:xeditor.table.mergeleft' Merge current cell left
'button:xeditor.table.mergeup' Merge current cell up
'button:xeditor.table.mergedown' Merge current cell down
'button:xeditor.table.splitcolumn' Split current column
'button:xeditor.table.splitrow' Split current row

HTML Table plugin API.

Inline format

npm install @xeditor/plugin-inlineformat --save --registry https://npm.xeditor.com:4873

This plugin adds inline format handling to Xeditor. It is used to properly apply inline formats to the active selection.

Example configuration:

{
    pluginId: 'inlineformat',
    ptype: 'uxxeditorinlineformat',
    inlineFormatTypes: ['bold', 'italic', 'underline', 'subscript', 'superscript']
}

This plugin also adds additional button templates, which can be used in your toolbar configuration.

Button Action
'button:xeditor.inlineformat' Applies defined element to current selection

Inline format plugin API.

List features

npm install @xeditor/plugin-listfeatures --save --registry https://npm.xeditor.com:4873

This plugin can be used for indenting/outdenting configured list item elements. it also adds preconfigured return handling

Example configuration:

{
    pluginId: 'listfeatures',
    ptype: 'uxxeditorlistfeatures',
    paragraphType: 'p',
    enableContextMenu: true,
    lists: [{
        listType: 'list_ordered',
        itemType: 'list_item'
    }, {
        listType: 'list_unordered',
        itemType: 'list_item'
    }]
}

The configuration results in the following:

  • when element list_item within list_ordered or list_unordered is selected, the indent and outdent button will be enabled (if possible, outdent is not enabled if element is already on first level)
  • as enableContextMenu config is set to true, also corresponding entries will be added to the context menu
  • triggering the action will indent/outdent the list_item element

The plugina lso adds additional button templates, which can be used on your toolbar configuration.

Button Action
'button:xeditor.indent' Indents current list item
'button:xeditor.outdent' Outdents current list item

List features plugin API.

Formula

npm install @xeditor/plugin-formula --save --registry https://npm.xeditor.com:4873 

This plugin adds the functionality to render and display formulas based on MathML and TeX to Xeditor.

Example configuration:

{
    pluginId: 'formula',
    ptype: 'uxxeditorformula',
    mathJaxURL: '/mathjax/MathJax.js'
}

Formula plugin API.

MathML editor

npm install @xeditor/plugin-mathmleditor --save --registry https://npm.xeditor.com:4873

This plugin adds Xeditors formula editor, Xforumla, to Xeditor.

The demo configuration of the plugin looks like this:

{
    pluginId: 'mathmleditor',
    ptype: 'uxxeditormathmleditor',
    mathJaxURL: '/mathjax/MathJax.js',
    mathJaxEditorURL: '/mathjaxeditor/index.html'
}

MathML editor plugin API.

Texeditor

npm install @xeditor/plugin-texeditor --save --registry https://npm.xeditor.com:4873

This plugin adds a TeX-Editor to Xeditor. It can be used to create and edit TeX formulas within Xeditor. The rendered result will be displayed within Xeditor.

The demo configuration of the plugin looks like this:

{
    pluginId: 'texeditor',
    ptype: 'uxxeditortexeditor',
    aceBaseURL: '/ace',
    mathJaxURL: '/mathjax/MathJax.js'
}

TeX editor plugin API.

Raw XML editor

npm install @xeditor/plugin-raweditor --save --registry https://npm.xeditor.com:4873

This plugins adds Xeditors raw XML editor to Xeditor. It can be used to correct invalid documents that got loaded, as well as to directly edit plain XML within Xeditor.

The demo configuration of the plugin looks like this:

{
    pluginId: 'raweditor',
    ptype: 'uxxeditorraweditor',
    aceBaseURL: '/ace',
    validationURL: '//127.0.0.1:3000/editor/validate',
    transformURL: '//127.0.0.1:3000/editor/transform'
}

The plugin also adds an additional button template, which can be used in your toolbar configuration.

Button Action
'button:xeditor.raweditor' Opens raw editor

Raw XML editor plugin API.

Spell checker

npm install @xeditor/plugin-spellchecker --save --registry https://npm.xeditor.com:4873

This plugin adds spellcheck funtionality to Xeditor. It uses Hunspell dictionaries and is based on language tools. The default service for this is hosted by Xeditor.

The demo configuration of the plugin looks like this:

{
    pluginId: 'spellchecker',
    ptype: 'uxxeditorspellchecker',
    spellCheckerURL: '//127.0.0.1:3000/editor/spellchecker'
}

The plugin also adds additional button templates, which can be used in your toolbar configuration.

Button Action
'button:xeditor.spellchecker.checkDocument' Performs spell check on whole document
'button:xeditor.spellchecker.configure' Configure language to spell check agains
'button:xeditor.spellchecker.remove' Remove current marker
'button:xeditor.spellchecker.check' Toggles spellcheck. When activated, checks the whole document in realtime.

Spell checker plugin API.

Tag visualizer

npm install @xeditor/plugin-tagvisualizer --save --registry https://npm.xeditor.com:4873

This plugin adds the tagview feature to Xeditor. It will display start and end tags of XML elements within the document.

Default configuration:

{
    pluginId: 'tagvisualizer',
    ptype: 'uxxeditortagvisualizer'
}

The plugin also adds an additional button template, which can be used in your toolbar configuration.

Button Action
'button:xeditor.tagvisualizer' Shows/hides tags

Tag visualizer plugin API.

Toc

npm install @xeditor/plugin-toc --save --registry https://npm.xeditor.com:4873

This plugin adds the table of content panel to Xeditor. It will display configured chapter like elements in a tree structure. It will also add proper numbering to the defined title element. Additioanly, the entries can be rearranged using its drag&drop feature.

Example configuration:

{
    pluginId: 'toc',
    ptype: 'uxxeditortoc',
    tocTypes: {
        chapter: {
            iconCls: 'fa-file-text-o',
            hasNumber: true,
            textType: 'heading',
            searchRecursive: false
        }
    }
}

It should be placed in your plugin configuration file (plugins.js as default).

The configuration results in the following:

  • elements of type chapter will add entries to the table of content panel
  • the content of the heading element within that chapter will be used as text content for created entry
  • chapter elements can be rearranged using drag&drop on created entries

TOC plugin API.

Wiris editor

npm install @xeditor/plugin-wiriseditor --save --registry https://npm.xeditor.com:4873

This plugin adds the formula editor http://www.wiris.com/en to Xeditor. Please note that an additional WIRIS license has to be purchased in order to use it.

The demo configuration of the plugin looks like this:

{
    pluginId: 'wiriseditor',
    ptype: 'uxxeditorwiriseditor',
    configURL: '/wiris/app/configurationjs',
    coreURL: '/wiris/core/core.js',
    editorURL: '/wiris/custom/editor.html?lang=de'
}

WIRIS editor plugin API.

XML view

npm install @xeditor/plugin-xmlview --save --registry https://npm.xeditor.com:4873

This plugin adds the XML view panel to Xeditor. It will display the plain XML of your current element. It is in sync with the document, so all changes you perform will be appear in real time in the XML panel.

The demo configuration of the plugin looks like this:

{
    pluginId: 'xmlview',
    ptype: 'uxxeditorxmlview'
}

XML view plugin API.