WYSIWYG editor font size issue

It selects every font via some large font (I assume it's the fontSize=7). So, if I select font size, let's say 13px, and start typing it goes to a huge font first, but if I select the 13px font again it starts rendering the 13px font. It does this for every font. (Huge font first then it goes to the font you click on the second time). Any ideas why?

This is the link to this particular editor if you want to see what libraries it's using: https://github.com/wysiwygjs/wysiwyg.js

    // Fontsize plugin
            fontsize: index != 0 ? false : {
                title: 'Size',
                image: '\uf034', // <img src="path/to/image.png" width="16" height="16" alt="" />
                popup: function( $popup, $button ) {
                        // Hack: http://stackoverflow.com/questions/5868295/document-execcommand-fontsize-in-pixels/5870603#5870603
                        var list_fontsizes = [];
                        for( var i=8; i <= 11; ++i )
                            list_fontsizes.push(i+'px');
                        for( var i=12; i <= 28; i+=2 )
                            list_fontsizes.push(i+'px');
                        list_fontsizes.push('36px');
                        list_fontsizes.push('48px');
                        list_fontsizes.push('72px');
                        var $list = $('<div/>').addClass('wysiwyg-plugin-list')
                                               .attr('unselectable','on');
                        $.each( list_fontsizes, function( index, size ) {
                            var $link = $('<a/>').attr('href','#')
                                                .html( size )
                                                .click(function(event) {
                                                    $(element).wysiwyg('shell').fontSize(7).closePopup();
                                                    $(element).wysiwyg('container')
                                                            .find('font[size=7]')
                                                            .removeAttr("size")
                                                            .css("font-size", size);
                                                    // prevent link-href-#
                                                    event.stopPropagation();
                                                    event.preventDefault();
                                                    return false;
                                                });
                            $list.append( $link );
                        });
                        $popup.append( $list );
                       }
                //showstatic: true,    // wanted on the toolbar
                //showselection: true    // wanted on selection
            },

Code (markup):

 

I made some progress. I changed it like this and it seems to be changing the fonts now without that large font jump but it doesn't want to cancel a previous font and start a new one. It keep changing the entire text to a new font even when you do a new line.

            // Fontsize plugin
            fontsize: index != 0 ? false : {
                title: 'Size',
                image: '\uf034', // <img src="path/to/image.png" width="16" height="16" alt="" />
                popup: function( $popup, $button ) {
                        // Hack: http://stackoverflow.com/questions/5868295/document-execcommand-fontsize-in-pixels/5870603#5870603
                           var list_fontsizes = [];
                            for( var i=8; i <= 11; ++i )
                                list_fontsizes.push(i+'px');
                            for( var i=12; i <= 28; i+=2 )
                                list_fontsizes.push(i+'px');
                            list_fontsizes.push('36px');
                            list_fontsizes.push('48px');
                            list_fontsizes.push('72px');
                            var $list = $('<div/>').addClass('wysiwyg-plugin-list')
                                                   .attr('unselectable','on');
                            $.each( list_fontsizes, function( fontSize, size ) {
                                var $link = $('<a/>').attr('href','#')
                                                    .html( size )
                                                    .click(function(event) {
                                                        $(element).wysiwyg('shell').fontSize().closePopup();
                                                        $(element).wysiwyg('container')
                                                                .removeAttr("size")
                                                                .css("font-size", size);
                                                        // prevent link-href-#
                                                        event.stopPropagation();
                                                        event.preventDefault();
                                                        return false;
                                                    });
                                $list.append( $link );
                            });
                            $popup.append( $list );
                           }
                    //showstatic: true,    // wanted on the toolbar
                    //showselection: true    // wanted on selection
                },

Code (markup):

 

1) you probably shouldn't be using pixel font sizes.
2) you probably shouldn't be using pixel font sizes.
3) you probably shouldn't be using pixel font sizes.

 

Anyway, I tried a wysiwyg editor on my site and I can assure anyone who still has doubts whether or not it's a good thing.... It's a piece of crap! All of them!

Who in their right mind even came up with that idea?

I should've listened to you deathshadow. Goodness gracious what a horrible idea that is. Even the bestest of them out there (I tried pretty much all of them) are junk. Literal junk. I will never use another one UNLESS somebody designs an editor that produces valid / reasonable / acceptable html tags and codes. As of now NONE of them do.

 

Hence why you use an editor that inserts bbcode instead. Dealing with broken bbcode is a lot easier than broken html-tags, and having it behave is a lot easier (as you can strip any/all html tags from the input, and just keep the bbcode).

 

Actually that's not an issue. I figured out how I can show a user generated content (tags and all) without it breaking my site. I was just taking about the horrific codes that each one of them generates. I didn't realize how bad it was. And the more buttons you push the uglier it becomes.