When I edit the button it goes back to default settings

[Inawire]

I even tried the demo on your site. Creating a button works great but if you go to make changes, some times it works then suddenly it is back to the default settings.

[Inawire]

I think I got the steps to reproduce. Adding a button, double clicking on it to update / change it no issues. Repeated many times. Went to source and back, no problem. Touched the Icon again and now I can't edit the first button.

[Inawire]

Sorry, source and back kils it.

[smonetti]

Yes, looks like the issues happens when you go from Editor, to Source, then back to Editor. I will look in to this issue.

[Inawire]

If it help, it also happens when I bring up content has existing buttons that were previously saved into a database. Maybe some sort of initialization. Just guessing, I'll need to read through the Widget tutorials.

[MrZen88]

For those who want a quick solution, you need to fill the init function in the file plugin.js
This is my solution:
init: function () {
var $el = jQuery(this.element.$);

                if ($el.hasClass("btn-link")) {
                    this.data.btntype = "btn-link";
                } else if ($el.hasClass("btn-default")) {
                    this.data.btntype = "btn-default";
                } else if ($el.hasClass("btn-primary")) {
                    this.data.btntype = "btn-primary";
                } else if ($el.hasClass("btn-info")) {
                    this.data.btntype = "btn-info";
                } else if ($el.hasClass("btn-success")) {
                    this.data.btntype = "btn-success";
                } else if ($el.hasClass("btn-warning")) {
                    this.data.btntype = "btn-warning";
                } else if ($el.hasClass("btn-danger")) {
                    this.data.btntype = "btn-danger";
                }

                if ($el.hasClass("btn-xs")) {
                    this.data.btnsize = "btn-xs";
                } else if ($el.hasClass("btn-sm")) {
                    this.data.btnsize = "btn-sm";
                } else if ($el.hasClass("btn-lg")) {
                    this.data.btnsize = "btn-lg";
                }

                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');
                }
            },

[mattiasaxelsson]

For me the empty glyphicon span was removed, and this config at top of the js kept the span:

CKEDITOR.dtd.$removeEmpty.span = 0;

[vonloxx]

@MrZen88 Maybe you could make a pull request with your solution?

[dstorozhuk]

@mattiasaxelsson As I see now the plugin use <i> element for icons, not a span.
The solution is to allow empty <i> tags.

you need to fill the init function in the file plugin.js :) Yes:)
This is my solution:

init: function (editor) {
editor.config.protectedSource.push(/<i[^>]*><\/i>/g);
....

[adamdelaney]

This issue looks like it has been addressed in PR #9 and has been merged into master.