Changing font size options on WYSIWYG editor?

Question

So I have a bootstrap wysiwyg editor from a jqueryscript.net plugin and I'm trying to give more font options in the font size dropdown. So I went into the JS and found the var for it and changed it from like small, medium, large, huge into more precise sizes like 10px, 11px, 12px, etc. But when I got into the editor to test it out, it's still using the old font sizes, so when I go from like 5px-10px it's the small medium size.. etc. I've looked and looked and looked in the JS which isn't too in depth and cannot find how it's pulling those in for the life of me! Does anyone have any clue how to adjust the font sizes correctly on this dropdown?? Thank you!!

I put the code into a jsfiddle because it's too long for here, couldn't get it working in it though. I had to remove a document.write for the print function in the js to get it to save.

http://jsfiddle.net/wfaLa3h0/3/

code here

Answer 1

Following the solution to this question, I've created a custom function for replacing <font size="7"> with CSS of the selected font size.

'font_size': { "select":true,
    "default": "Font size",
    "tooltip": "Font Size",
    "commandname":"fontSize", 
    "custom":function(button){
        document.execCommand("fontSize", false, "7");
        $("#contentarea font[size]").removeAttr("size")
            .css("font-size", $(button).data('value'));
    }
}

JSFiddle: http://jsfiddle.net/wfaLa3h0/6/