Panel Menu Button

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

Example: the 'ColorButton' button

To use the ColorButton 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(name, CKEDITOR.UI_PANELBUTTON, {
    label: title,
    title: title,
    modes: { wysiwyg: 1 },
    ...
});

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

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

Both of the ways are correct and it means that we need an AlloyEditor adapter to use this kind of CKEDITOR plugins.

Using the ae_panelmenubuttonbridge plugin

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

AlloyEditor.editable('myContentEditable', {
    extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value +
        ',ae_uibridge,ae_panelmenubuttonbridge,colorbutton'
});

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 'BGColor' and 'TextColor' buttons 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
// 'BGColor' and 'TextColor' are the names used by the plugin when calling editor.ui.addPanelMenuButton
selections[3].buttons.push('BGColor','TextColor');

var editor1 = AlloyEditor.editable('myContentEditable', {
    extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value +
        ',ae_uibridge,ae_buttonbridge,ae_panelmenubuttonbridge,panel,floatpanel,button,panelbutton,colorbutton',
    toolbars: {
        styles: {
            selections: selections,
            tabIndex: 1
        }
    }
});

Now you should be able to see and use the 'BGColor' and 'TextColor' buttons in your text toolbar!

comments powered by Disqus