plugin.js

(function () {

    CKEDITOR.plugins.add('ckbutton', {
            lang: 'en',
            requires: 'widget,dialog',
            icons: 'ckbutton',
            init: function (editor) {
                // Allow any attributes.
                editor.config.extraAllowedContent = '*(*);*{*}';
                var lang = editor.lang.ckbutton;

                console.log(editor);

                CKEDITOR.dialog.add('ckbutton', this.path + 'dialogs/ckbutton.js');

                // Add widget
                editor.ui.addButton('ckbutton', {
                    label: lang.buttonTitle,
                    command: 'ckbutton',
                    icon: this.path + 'icons/ckbutton.png'
                });

                editor.widgets.add('ckbutton', {
                    dialog: 'ckbutton',
                    allowedContent: 'a(ckbutton)',
                    template: '<a class="ckbutton">' + '<span class="text"></span>' + '</a>',

                    init: function () {
                        var $el = jQuery(this.element.$);

                        this.data.styles = $el.attr('data-custom-button');

                        this.data.href = $el.attr('href');

                        this.data.target = $el.attr('target');

                        this.data.text = jQuery('.text', $el).text();

                        var bs_icon_left = jQuery('.bs-icon-left', $el);
                        var bs_icon_right = jQuery('.bs-icon-right', $el);
                        var fa_icon_left = jQuery('.fa-icon-left', $el);
                        var fa_icon_right = jQuery('.fa-icon-right', $el);

                        if (bs_icon_left.length > 0) {
                            bs_icon_left.removeClass('bs-icon-left').removeClass('glyphicon');
                            this.data.bsiconleft = bs_icon_left.attr('class');
                            bs_icon_left.addClass('bs-icon-left').addClass('glyphicon');
                        }

                        if (bs_icon_right.length > 0) {
                            bs_icon_right.removeClass('bs-icon-right').removeClass('glyphicon');
                            this.data.bsiconright = bs_icon_right.attr('class');
                            bs_icon_right.addClass('bs-icon-right').addClass('glyphicon');
                        }

                        if (fa_icon_left.length > 0) {
                            fa_icon_left.removeClass('fa-icon-left').removeClass('fa');
                            this.data.faiconleft = fa_icon_left.attr('class');
                            fa_icon_left.addClass('fa-icon-left').addClass('fa');
                        }

                        if (fa_icon_right.length > 0) {
                            fa_icon_right.removeClass('fa-icon-right').removeClass('fa');
                            this.data.faiconright = fa_icon_right.attr('class');
                            fa_icon_right.addClass('fa-icon-right').addClass('fa');
                        }
                    },

                    data: function () {
                        var $el = jQuery(this.element.$);
                        var styles = this.editor.config.buttonStylesSet;
                        var buttonStyle = styles[this.data.styles];

                        if (buttonStyle) {
                            $el.attr('data-custom-button', this.data.styles);

                            for (var i = 0; i < styles.length; i++) {
                                $el.removeClass(styles[i].attributes.class);
                            }

                            $el.addClass(buttonStyle.attributes.class)
                        }

                        if (this.data.href) {
                            $el.attr('href', this.data.href);
                            this.element.$.removeAttribute('data-cke-saved-href');
                        }

                        if (this.data.target && this.data.target != '') {
                            $el.attr('target', this.data.target);
                        }

                        if (this.data.text) {
                            jQuery('.text', $el).text(this.data.text);
                        }

                        if (this.data.hasOwnProperty('bsiconleft')) {
                            jQuery('.bs-icon-left', $el).remove();
                            if (this.data.bsiconleft) {
                                $el.prepend(`<span style="word-spacing: -1em;" class="bs-icon-left glyphicon ${this.data.bsiconleft}">&nbsp;</span>\n`);
                            }
                        }

                        if (this.data.hasOwnProperty('bsiconright')) {
                            jQuery('.bs-icon-right', $el).remove();
                            if (this.data.bsiconright) {
                                $el.append(`<span style="word-spacing: -1em;" class="bs-icon-right glyphicon ${this.data.bsiconright}">&nbsp;</span>\n`);
                            }
                        }

                        if (this.data.hasOwnProperty('faiconleft')) {
                            jQuery('.fa-icon-left', $el).remove();
                            if (this.data.faiconleft) {
                                $el.prepend(`<i style="word-spacing: -1em;" class="fa fa-icon-left ${this.data.faiconleft}">&nbsp;</i>\n`);
                            }
                        }

                        if (this.data.hasOwnProperty('faiconright')) {
                            jQuery('.fa-icon-right', $el).remove();
                            if (this.data.faiconright) {
                                $el.append(`<i style="word-spacing: -1em;" class="fa fa-icon-right ${this.data.faiconright}">&nbsp;</i>\n`);
                            }
                        }
                    },

                    upcast: function (element) {
                        return (element.name == 'a' || element.name == 'button') && element.hasClass('ckbutton');
                    }
                });
            }
        }
    );

})();