How to use alloyeditor - 10 common examples

<button title="{AlloyEditor.Strings.link}" tabindex="{this.props.tabIndex}" data-type="button-link" aria-label="{AlloyEditor.Strings.link}">
                <svg>
                    
                </svg>
            </button>
        );
    }
}

AlloyEditor.Buttons[EzBtnImageLink.key] = AlloyEditor.EzBtnImageLink = EzBtnImageLink;
eZ.addConfig('ezAlloyEditor.ezBtnImageLink', EzBtnImageLink);

* @method invokeWithFixedScrollbar
     * @param {Function} callback invoked after saving current scrollbar position
     */
    invokeWithFixedScrollbar(callback) {
        if (navigator.userAgent.indexOf('Chrome') > -1) {
            const scrollY = window.pageYOffset;

            callback();
            window.scroll(window.pageXOffset, scrollY);
        } else {
            callback();
        }
    }
}

AlloyEditor.Buttons[EzBtnLinkEdit.key] = AlloyEditor.ButtonLinkEdit = EzBtnLinkEdit;
eZ.addConfig('ezAlloyEditor.ezBtnLinkEdit', EzBtnLinkEdit);

* @method invokeWithFixedScrollbar
     * @param {Function} callback invoked after saving current scrollbar position
     */
    invokeWithFixedScrollbar(callback) {
        if (navigator.userAgent.indexOf('Chrome') > -1) {
            const scrollY = window.pageYOffset;

            callback();
            window.scroll(window.pageXOffset, scrollY);
        } else {
            callback();
        }
    }
}

AlloyEditor.Buttons[EzBtnLinkEdit.key] = AlloyEditor.ButtonLinkEdit = EzBtnLinkEdit;

const eZ = (window.eZ = window.eZ || {});

eZ.ezAlloyEditor = eZ.ezAlloyEditor || {};
eZ.ezAlloyEditor.ezBtnLinkEdit = EzBtnLinkEdit;

title={AlloyEditor.Strings.deleteTable}>
                <svg>
                    
                </svg>
            
        );
    }

    fireCustomUpdateEvent() {
        const nativeEditor = this.props.editor.get('nativeEditor');

        nativeEditor.fire('customUpdate');
    }
}

AlloyEditor.Buttons[EzBtnTableRemove.key] = AlloyEditor.EzBtnTableRemove = EzBtnTableRemove;
eZ.addConfig('ezAlloyEditor.ezBtnTableRemove', EzBtnTableRemove);

}

        const label = Translator.trans(/*@Desc("Table")*/ 'table_btn.label', {}, 'alloy_editor');
        const css = 'ae-button ez-btn-ae ez-btn-ae--table';

        return (
            <button title="{label}" tabindex="{this.props.tabIndex}">
                <svg>
                    
                </svg>
            </button>
        );
    }
}

AlloyEditor.Buttons[EzBtnTable.key] = AlloyEditor.EzBtnTable = EzBtnTable;
eZ.addConfig('ezAlloyEditor.ezBtnTable', EzBtnTable);

EzBtnTable.propTypes = {
    editor: PropTypes.object.isRequired,
    label: PropTypes.string.isRequired,
    tabIndex: PropTypes.number.isRequired,
};

* @return {Object} The content which should be rendered.
     */
    render() {
        const css = 'ae-button ez-btn-ae ez-btn-ae--imageupdate ' + this.getStateClasses();

        return (
            <button tabindex="{this.props.tabIndex}">
                <svg>
                    
                </svg>
            </button>
        );
    }
}

AlloyEditor.Buttons[EzBtnImageUpdate.key] = AlloyEditor.EzBtnImageUpdate = EzBtnImageUpdate;
eZ.addConfig('ezAlloyEditor.ezBtnImageUpdate', EzBtnImageUpdate);

EzBtnImageUpdate.defaultProps = {
    udwTitle: Translator.trans(/*@Desc("Select an image to embed")*/ 'image_update_btn.udw.title', {}, 'alloy_editor'),
    udwContentDiscoveredMethod: 'updateImage',
    udwConfigName: 'richtext_embed_image',
    label: Translator.trans(/*@Desc("Select another image item")*/ 'image_update_btn.label', {}, 'alloy_editor'),
};

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AlloyEditor from 'alloyeditor';
import EzEmbedAlign from '../base/ez-embedalign';

export default class EzEmbedAlignCenter extends EzEmbedAlign {
    static get key() {
        return 'ezembedcenter';
    }
}

AlloyEditor.Buttons[EzEmbedAlignCenter.key] = AlloyEditor.EzEmbedAlignCenter = EzEmbedAlignCenter;
eZ.addConfig('ezAlloyEditor.ezEmbedAlignCenter', EzEmbedAlignCenter);

EzEmbedAlignCenter.defaultProps = {
    alignment: 'center',
    iconName: 'image-center',
    cssClassSuffix: 'embed-center',
    label: Translator.trans(/*@Desc("Center")*/ 'embed_align_center_btn.label', {}, 'alloy_editor'),
};

*/
    render() {
        const css = 'ae-button ez-btn-ae ez-btn-ae--heading ' + this.getStateClasses();
        const label = Translator.trans(/*@Desc("Heading")*/ 'heading_btn.label', {}, 'alloy_editor');

        return (
            <button title="{label}" tabindex="{this.props.tabIndex}">
                <svg>
                    
                </svg>
            </button>
        );
    }
}

AlloyEditor.Buttons[EzBtnHeading.key] = AlloyEditor.EzBtnHeading = EzBtnHeading;
eZ.addConfig('ezAlloyEditor.ezBtnHeading', EzBtnHeading);

EzBtnHeading.propTypes = {
    command: PropTypes.string,
    modifiesSelection: PropTypes.bool,
};

EzBtnHeading.defaultProps = {
    command: 'eZAddContent',
    modifiesSelection: true,
};

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AlloyEditor from 'alloyeditor';
import EzEmbedAlign from '../base/ez-embedalign';

export default class EzEmbedAlignRight extends EzEmbedAlign {
    static get key() {
        return 'ezembedright';
    }
}

AlloyEditor.Buttons[EzEmbedAlignRight.key] = AlloyEditor.EzEmbedAlignRight = EzEmbedAlignRight;
eZ.addConfig('ezAlloyEditor.ezEmbedAlignRight', EzEmbedAlignRight);

EzEmbedAlignRight.defaultProps = {
    alignment: 'right',
    iconName: 'image-right',
    cssClassSuffix: 'embed-right',
    label: Translator.trans(/*@Desc("Right")*/ 'embed_align_right_btn.label', {}, 'alloy_editor'),
};

aria-owns={buttonCommandsListId}
                    className="ae-button ez-btn-ae"
                    onClick={this.props.toggleDropdown}
                    tabIndex={this.props.tabIndex}
                    title={AlloyEditor.Strings.cell}>
                    <svg>
                        
                    </svg>
                
                {buttonCommandsList}
            
        );
    }
}

AlloyEditor.Buttons[EzBtnTableCell.key] = AlloyEditor.EzBtnTableCell = EzBtnTableCell;
eZ.addConfig('ezAlloyEditor.ezBtnTableCell', EzBtnTableCell);