Javascript 在所见即所得编辑器上更改字体大小选项？

因此，我有一个引导的wysiwyg编辑器，我试图在字体大小下拉列表中提供更多的字体选项。所以我进入JS，找到了它的var，并将它从小、中、大、大变为更精确的大小，如10px、11px、12px等。但是当我进入编辑器进行测试时，它仍然使用旧的字体大小，所以当我从5px-10px变为小的中等大小。。等等，我看了又看，看了又看，JS不是很深入，也找不到它是如何把我的生活中的那些！有人知道如何在这个下拉列表中正确调整字体大小吗？？谢谢

我将代码放在JSFIDLE中，因为它太长，无法在其中工作。我必须删除一个document.write，以便js中的打印功能保存它

接下来，我创建了一个自定义函数，用选定字体大小的CSS替换

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

jsiddle:

接下来，我创建了一个自定义函数，用选定字体大小的CSS替换

'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:

我在代码中查找“10px”或“small”，但找不到它。您关心哪些行？我将var fontsizes部分从

var fontsizes={“小”：“2”，“正常”：“3”，“中等”：“4”，“大”：“5”，“大”：“6”}看起来是这样的
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”，}也许您可以尝试删除“px”，使其与原始格式匹配。json中72处还有一个尾随逗号。你看过当你点击它时会发生什么吗？它是否分配了一些无效的CSS规则？编辑器使用了一个带有
size
属性的
标记，该属性仅适用于数字1-7。这就是为什么你会遇到这个问题。你能把选项改为只使用1-5吗？还是想要一个更细粒度的选项？我在代码中查找了“10px”或“small”，但找不到它。您关心哪些行？我将var fontsizes部分从
var fontsizes={“小”：“2”，“正常”：“3”，“中等”：“4”，“大”：“5”，“大”：“6”}看起来是这样的
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”，}也许您可以尝试删除“px”，使其与原始格式匹配。json中72处还有一个尾随逗号。你看过当你点击它时会发生什么吗？它是否分配了一些无效的CSS规则？编辑器使用了一个带有
size
属性的
标记，该属性仅适用于数字1-7。这就是为什么你会遇到这个问题。您能将选项更改为仅使用1-5吗？还是希望其中包含更多细粒度选项？是的！非常感谢你，这真是太棒了！谢谢，谢谢！！当你在Chrome中查看它时，有一个轻微的扭结，它会在你更改字体大小的前几次工作，然后它会突然恢复到原来的状态，你不能再更改它了？@iamabana我已经修复了它；显然，HTML编辑器并不总是知道所选文本的正确“commonAncestorContainer”是什么。将
$（“font[size]”，$（“#txtEditor”）.data（'currentRange'）['commonAncestorContainer']）
更改为
$（“#contentarea font[size]”）
。在firefox中尝试了此操作，但出现错误。它确实改变了字体大小，但它正在改变已键入文本的字体大小是的！非常感谢你，这真是太棒了！谢谢，谢谢！！当你在Chrome中查看它时，有一个轻微的扭结，它会在你更改字体大小的前几次工作，然后它会突然恢复到原来的状态，你不能再更改它了？@iamabana我已经修复了它；显然，HTML编辑器并不总是知道所选文本的正确“commonAncestorContainer”是什么。将
$（“font[size]”，$（“#txtEditor”）.data（'currentRange'）['commonAncestorContainer']）
更改为
$（“#contentarea font[size]”）
。在firefox中尝试了此操作，但出现错误。它确实会更改字体大小，但会更改已键入文本的字体大小