So I have a bootstrap wysiwyg editor from a jqueryscript 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.

/

code here

So I have a bootstrap wysiwyg editor from a jqueryscript 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/wfaLa3h0/3/

code here

• javascript
• jquery
• twitter-bootstrap
• wysiwyg
• font-size

Share Improve this question Follow edited Jan 28, 2015 at 17:11 Pluto 3,0362929 silver badges3838 bronze badges asked Jan 28, 2015 at 16:26 IAMABANANAIAMABANANA 15544 silver badges1818 bronze badges 7

• I looked for "10px" or "small" in that code and couldn't find it. What lines are you concerned with? – chris Commented Jan 28, 2015 at 16:31
• I changed the section var fontsizes from var fontsizes = { "Small" :"2", "Normal":"3", "Medium":"4", "Large" :"5", "Huge" :"6" }; – IAMABANANA Commented Jan 28, 2015 at 16:33
• to look like this var fontsizes = { "5" :"5px", "6" :"6px", "7" :"7px", "8" :"8px", "9" :"9px", "10" :"10px", "11" :"11px", "12" : "12px", "14" : "14px", "16" : "16px", "18" : "18px", "20" : "20px", "22" : "22px", "24" : "24px", "26" : "26px", "28" : "28px", "36" : "36px", "48" : "48px", "72" : "72px", }; – IAMABANANA Commented Jan 28, 2015 at 16:34
• Maybe you could try removing the "px", so it matches the original format. You also have a trailing ma in your json at 72. Have you looked at what happens when you click it? Does it assign some invalid CSS rule? – chris Commented Jan 28, 2015 at 16:39
• The editor uses a <font> tag with its size attribute which only works with the numbers 1-7. That's why you're experiencing that problem. Could you change the options to just use 1-5 or do you want one with more fine-grained options? – Pluto Commented Jan 28, 2015 at 16:39

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 5

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",
    "mandname":"fontSize", 
    "custom":function(button){
        document.execCommand("fontSize", false, "7");
        $("#contentarea font[size]").removeAttr("size")
            .css("font-size", $(button).data('value'));
    }
}

JSFiddle: http://jsfiddle/wfaLa3h0/6/