Toolbar

Make toolbar buttons temporarily invisible

You can achieve this with the following definition:

{
    tooltip: global_phrases['xeditor.autolinking'],
    icon: 'fa-car',
    raw: {
        hidden: true
    },
    listeners: {
        scope: editor,
        click: this.configObj.configData.autoLinker
    }
 }

Our ConfigProcessor only provides a handful of configuration properties for a button object. These are interpreted differently (depending on the button type, etc). However, these are not all passed to the button created by this.

If you still want to pass properties directly to the ExtJS components, use the property raw (see above).

If you want to store any kind of information on a button (e.g. the type of an insert button), use the property data. All properties under data are stored to the ExtJS button in the property xedata.

So an insert button for chapter has the property xedata after the toolbar is initialized: {elementType: 'chapter'}.

Change default to expand or collapsed

The panel appears collapsed as default. With this you can also adjust the shown title at the top of the panel.

The following code used in the editor attributes.js adds the title "Test" and initially collapses the side panel:

accordionConfigOverride: {
    title: 'Test',
    collapsed: true
}

External Menu

Change type to ribbon

For the external menu we have two options: You can use the drop downs that we use as a default.

The other option is to switch to a ribbon mode.

You can achieve this by changing the property of the createExternalToolbarConfig method:

createExternalToolbarConfig: function(editor) {
        return {
            type: 'ribbon';
            [...]

We can define objects within the method which create the ribbon buttons.

This could look as follows:

type: 'ribbon',
    items: [
        {
            text: 'comment',
            items: [
                'button:xeditor.spellchecker.configure',
            ]
        },
        {
            text: 'review',
            items: [
                {
                    extend: 'button:xeditor.tagvisualizer',
                    icon: 'fa-paw'
                }
            ]
        }
    ]

What we have done:

• The value of the parameter text defines which text is shown in the ribbon button.
• In the items array we define the list of toolbar buttons which are only shown if this particular ribbon is open. In the example above the toolbar button tagvisualizer is only visible if the review ribbon is open.
• Inside the object we can use predefined Xeditor buttons, like button:xeditor.tagvisualizer.

If you want to learn more about the buttons that are available in Xeditor, have a look into concepts.

Context Menu

Add new buttons

The following is best practice for adding context menu items:

init.js/initEditor

editor.on('buildcontextmenu', editor.configObj.configData.onEditorBuildContextMenu);

listeners.js

onEditorBuildContextMenu: function(editor, result) {
  // only proceed if menu was build
  if (!result.menuBuilt) {
    return;
  }

  // your code / checks / whatever here

  // add sample item at index 0
  result.menu.insert(0, [{
    itemId: 'what-you-prefer', // with this you can get your item by            editor.contextmenu.getComponent(id)
    text: 'Itemtext (preferably from global_prases)',
    disabled: false, // or your condition
    hidden: false, // or your condition
    xedata: { // this is just our common way of storing data on components if required
      yourProperty: 'your_data'
    },
    listeners: {
      click: function() {
        // this function if larger or used from other places
        // also preferably outsource to seperate function in listeners/main
        Ext.Msg.show({
            title:'This worked',
            message: 'your message goes here',
            buttons: Ext.Msg.OK
        });
      }
    }
  }]);
}