Rich Combo

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

Example: the 'Font Size' and 'Family' buttons

To use the Font Size and Family 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 Font Size and Family plugin source code you can find the following snippet:

editor.ui.addRichCombo(comboName, {
    label: lang.label,
    title: lang.panelTitle,
    toolbar: 'styles,' + order,
    ...
});

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

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

Using the ae_richcombobridgebridge plugin

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

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

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 'Font' and 'FontSize' buttons to a toolbar

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

var selections = AlloyEditor.Selections;

// 3 is the index of the text toolbar
// 'Font' and 'FontSize' are the names used by the plugin when calling editor.ui.addRichCombo
selections[3].buttons.push('Font', 'FontSize');

var editor1 = AlloyEditor.editable('myContentEditable', {
    extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value +
        ',ae_uibridge,ae_richcombobridge,font',
    toolbars: {
        styles: {
            selections: selections,
            tabIdndex: 1
        }
    }
});

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

comments powered by Disqus