Menu Button

Many CKEditor plugins add different new menu buttons to the editor. This tutorial shows how to identify and use them inside AlloyEditor.

Example: the 'Spell Checker as you type' button

To use the Spell Checker as you type plugin, you will need to download it from the plugin page and unzip it into the plugins folder.

Identifying the provided CKEditor.UI

Inside the Spell Checker as you type plugin source code you can find the following snippet:

editor.ui.add('Scayt', CKEDITOR.UI_MENUBUTTON, {
    label : lang.text_title,
    title : (editor.plugins.wsc ? editor.lang.wsc.title : lang.text_title),
    ...
});

This plugin uses the editor.ui.add(name, CKEditor.UI_MENUBUTTON, definition) API, but other CKEditor plugins adding buttons may use the equivalent editor.ui.addMenuButton API.

In any of these cases, we need an AlloyEditor adapter to use this kind of CKEditor plugins.

Using the ae_menubuttonbridge plugin

AlloyEditor provides a plugin that works as an adapter for CKEditor UI MenuButton features generating compatible menu buttons

AlloyEditor.editable('myContentEditable', {
    extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value +
        ',ae_uibridge,ae_menubridge,ae_menubuttonbridge,scayt'
});

AlloyEditor.Core.ATTRS.extraPlugins.value is used to keep current extraPlugins that AlloyEditor use. With this, you make sure that the new buttons are loaded and registered properly into the editor.

Adding the 'Scayt' button to a toolbar

Following the toolbar configuration guide, you can add the 'Scayt' button to a toolbar like this:

var selections = AlloyEditor.Selections;

// 3 is the index of the text toolbar
// 'Scayt' is the name used by the plugin when calling editor.ui.addMenuButton
selections[3].buttons.push('Scayt');

AlloyEditor.editable('myContentEditable', {
    extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value +
        ',ae_uibridge,ae_menubridge,ae_menubuttonbridge,scayt',
    toolbars: {
        styles: {
            selections: selections,
            tabIndex: 1
        }
    }
});

Now you should be able to see and use the 'Undo' button in your text toolbar!

comments powered by Disqus