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.
cd your-xeditor-projectnpm install @xeditor/name-of-plugin --save --registry https://npm.xeditor.com:4873-
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.
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;
}
},
}
Attributes list
npm install @xeditor/plugin-attributeslist --save --registry https://npm.xeditor.com:4873
The plugin will add an attributes panel to Xeditors accordion. This offers the ability to read/set attributes on elements.
Compared to Xeditor 5.x (in which the attributes panel was a part of Xeditor core) the UI has been improved in order to offer better overview.
Default configuration:
{
pluginId: 'attributeslist',
listElementsWithoutAttributes: true,
ptype: 'uxxeditorattributeslist'
}
If you don't want the panel to be added to the accordion, but want to add it to somewhere else by yourself, you can do so by doing the following:
- Add the following property to the plugin configuration
enablePanel: false. This will cause the plugin to not build and add the panel - Create the panel yourself by doing:
var panel = Ext.create('Ext.ux.xeditor.plugin.AttributesList.Panel', panelConfig); - Add the panel to a suited container by calling
container.add(panel);
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'
}
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
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:
- Inserted/removed block/inline elements
- Inserted/removed breaks
- Cutting/pasting elements
- 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);
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 |
Collaboration
Note
This plugin is still in beta! This means the plugins features and functionality are still in development and are subject to change.
npm install @xeditor/plugin-collaboration --save --registry https://npm.xeditor.com:4873
The collaboration plugin enables multiple users to edit the same document at the same time within Xeditor.
Default configuration:
{
pluginId: 'collaboration',
ptype: 'uxxeditorcollaboration',
socketURL: BLACKBOX_URL,
wholeElementTypesToLock: ['tab_table'],
authOptions: {
token: 'xeditor-token'
}
}
In order to activate it, please ensure to set the configuration enableSocketServer to true in your blackbox configuration file xeblackbox.config.js.
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 |
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'
}
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
footnoteis not selected, it will collapse and its content will be hidden - when element
footnoteis selected, it will expand and its content will be shown
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 |
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 |
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 insert elements
npm install @xeditor/plugin-listinsertelements --save --registry https://npm.xeditor.com:4873
The plugin will add an additional panel to Xeditors accordion. This panel will offer options for inserting elements before, into, or after the currently selected element.
Default configuration:
{
pluginId: 'listinsertelements',
ptype: 'uxxeditorlistinsertelements'
}
If you don't want the panel to be added to the accordion, but want to add it to somewhere else by yourself, you can do so by doing the following:
- Add the following property to the plugin configuration
enablePanel: false. This will cause the plugin to not build and add the panel - Create the panel yourself by doing:
var panel = Ext.create('Ext.ux.xeditor.plugin.ListInsertElements.Panel', panelConfig); - Add the panel to a suited container by calling
container.add(panel);
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'
}
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'
}
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'
}
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 |
Search replace
npm install @xeditor/plugin-searchreplace --save --registry https://npm.xeditor.com:4873
This plugin will add a search and replace feature to Xeditor. It comes in two modes:
- One basic search replace window that will show up on to top right of the window. It can be opend by hitting
CTRL + F(for search) orCTRL + H(for search/replace) on the keyboard - One extended window that also offers options for searching for elements directly as well as attributes. It can be called by using the toolbar button or
CTRL + Shift + F
Default configuration:
{
pluginId: 'searchreplace',
ptype: 'uxxeditorsearchreplace'
}
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. |
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 |
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
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'
}
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'
}