Create Buttons

If you run the editor with the default UI, which is written in React, then adding a button is straightforward. Buttons are standard React classes. For your convenience, there are several mixins that you can use that provide basic functionality out of the box. Use CKEditor's API to style your content. That's all there is to it!

Creating a Button

Example of a new button that converts the current selection into a marquee
// Use the built-in version of React if your site does not use React
var React = AlloyEditor.React;

var ButtonMarquee = React.createClass({
    mixins: [AlloyEditor.ButtonStyle, AlloyEditor.ButtonStateClasses, AlloyEditor.ButtonActionStyle],

    propTypes: {
        editor: React.PropTypes.object.isRequired
    },

    getDefaultProps: function() {
        return {
            style: {
                element: 'marquee'
            }
        };
    },

    statics: {
        key: 'marquee'
    },

    render: function() {
        var cssClass = 'ae-button ' + this.getStateClasses();

        return (
            <button className={cssClass} data-type="button-marquee" onClick={this.applyStyle} tabIndex={this.props.tabIndex}>
                <span className="ae-icon-separator"></span>
            </button>
        );
    }
});

AlloyEditor.Buttons[ButtonMarquee.key] = AlloyEditor.ButtonMarquee = ButtonMarquee;

Using a Button

After creating your button, you have to add it to the configuration of the Toolbar where you want to use it.

Buttons that handle styles are usually placed in the Styles Toolbar, inside a text-like selection
var toolbars = [
    styles: {
        selections: [{
            name: 'text',
            buttons: ['styles', 'bold', 'italic', 'underline', 'link', 'twitter', 'marquee'],
            test: AlloyEditor.SelectionTest.text
        }],
        tabIndex: 1
    }
];

In this case, the Marquee button will appear last on the toolbar, after the Twitter button.

Liferay.com