Xeditor offers a couple of plugins which extend the basic functionality by some additional features. Some of them are quite general and do not require some schema specific configuration, like the comments or autosave plugin. However, there are also some plugins that need to be configured to your schema. This section covers those plugins and explains what to do.

Please note: For every plugin configuration we always need to insert the specific element name we get out of the types.js file, not the original element name from the schema.

Inline format

The demo configuration of the plugin looks like this:

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

In the array inlineFormatTypes we need to insert all available inline elements that are in the used schema.

Buttons

This plugin exports the following button templates that can be used in your toolbar configuration:

Table

The demo configuration of the plugin looks like this:

{
    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'
}

For each parameter we need to insert the fitting element name from the types.js file, if there is a fitting element in the used schema.

Buttons

This plugin exports the following button templates that can be used in your toolbar configuration:

Lists

The demo configuration of the plugin looks like this:

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

This results into 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

For each parameter we need to insert the fitting element name from the types.js file, if there is a fitting element in the used schema.

Change element level (indent / outdent)

The demo configuration of the plugin looks like this:

{
    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.

For each parameter we need to insert the fitting element name from the types.js file, if there is a fitting element in the used schema.

Breakhelper

The default configuration of the plugin looks like this:

{
    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'
    }]
}

This results into 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

For each parameter we need to insert the fitting element name from the types.js file, if there is a fitting element in the used schema.

Table of Contents

The demo configuration of the plugin looks like this:

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

This results into the following:

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

For each parameter we need to insert the fitting element name from the types.js file, if there is a fitting element in the used schema.

General schema unrelated plugin configuration

For an overview of all the available plugins see here. Schema unrelated plugins only need to be added to your project (package.json) and added to your plugins.js configuration. The plugin overview will cover how this configuration looks like.