Button

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

Example: the 'Undo' button

In this example, we're going to show how to add an undo button to a toolbar. In this case, the Undo plugin is bundled into AlloyEditor, so you don't need to do anything else.

Identifying the provided CKEditor.UI

Inside the undo plugin source code you can find the following snippet:

editor.ui.addButton( 'Undo', {
    label: editor.lang.undo.undo,
    command: 'undo',
    toolbar: 'undo,10'
});

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

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

Using the ae_buttonbridge plugin

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

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

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 'Undo' button to a toolbar

Following the toolbar configuration guide, we can add the 'Undo' button to a toolbar like this:

var selections = AlloyEditor.Selections;

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

AlloyEditor.editable('myContentEditable', {
    extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value +
        ',ae_buttonbridge,undo',
    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