0

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
Pluto
  • 2,900
  • 27
  • 38
IAMABANANA
  • 145
  • 2
  • 18
  • I looked for "10px" or "small" in that code and couldn't find it. What lines are you concerned with? – chris Jan 28 '15 at 16:31
  • I changed the section var fontsizes from `var fontsizes = { "Small" :"2", "Normal":"3", "Medium":"4", "Large" :"5", "Huge" :"6" };` – IAMABANANA Jan 28 '15 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 Jan 28 '15 at 16:34
  • Maybe you could try removing the "px", so it matches the original format. You also have a trailing comma in your json at 72. Have you looked at what happens when you click it? Does it assign some invalid CSS rule? – chris Jan 28 '15 at 16:39
  • The editor uses a `` 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 Jan 28 '15 at 16:39
  • For our use we really needed a more extensive list of font sizes, more importantly we needed specific sizes for certain sections in order to keep consistency across pages when people use this editor. Is there a way to change the font tag to like a span tag that uses font-sizes instead? – IAMABANANA Jan 28 '15 at 16:44
  • I'm sure there is, it would just require editing a lot more JS code. Lemme see what I can do. – Pluto Jan 28 '15 at 16:45

1 Answers1

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",
    "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/

Community
  • 1
  • 1
Pluto
  • 2,900
  • 27
  • 38
  • There is a slight kink when your looking at it in Chrome, it'll work the first few times you change the font size and then it'll all of a sudden revert back to the and you can't change it anymore? – IAMABANANA Jan 28 '15 at 18:26
  • 1
    @IAMABANANA I've fixed it; apparently the HTML editor doesn't always know what the correct "commonAncestorContainer" of the selected text is. Changed `$("font[size]", $('#txtEditor').data('currentRange')['commonAncestorContainer'])` to `$("#contentarea font[size]")`. – Pluto Jan 28 '15 at 20:16
  • 1
    Tried this in firefox and there is a bug. It does change font size but it is changing the font size of the already typed text – Thomas Williams Sep 19 '17 at 23:55