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

【问题标题】：Changing font size options on WYSIWYG editor?在所见即所得编辑器上更改字体大小选项？
【发布时间】：2015-03-27 15:42:03
【问题描述】：

所以我有一个来自a jqueryscript.net plugin 的引导程序所见即所得编辑器，我正在尝试在字体大小下拉列表中提供更多字体选项。所以我进入 JS 并找到它的 var 并将其从小、中、大、巨大更改为更精确的尺寸，如 10px、11px、12px 等。但是当我进入编辑器进行测试时，它是仍然使用旧的字体大小，所以当我从 5px-10px 开始时，它是中小号......为了我的生命！有没有人知道如何在这个下拉列表中正确调整字体大小？谢谢！！

我将代码放入 jsfiddle 中，因为它在这里太长了，但无法让它在其中工作。我必须删除 js 中打印功能的 document.write 才能保存。

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

code here

【问题讨论】：

我在该代码中查找“10px”或“small”但找不到。你关心什么线路？
我将部分 var fontsizes 从var fontsizes = { "Small" :"2", "Normal":"3", "Medium":"4", "Large" :"5", "Huge" :"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”，使其与原始格式匹配。您在 72 处的 json 中也有一个尾随逗号。您是否查看过单击它时会发生什么？它是否分配了一些无效的 CSS 规则？
编辑器使用带有size 属性的<font> 标记，该属性仅适用于数字1-7。这就是你遇到这个问题的原因。您可以将选项更改为仅使用 1-5 还是您想要一个具有更细粒度的选项？

标签： javascript jquery twitter-bootstrap wysiwyg font-size

【解决方案1】：

在 the solution to this question 之后，我创建了一个自定义函数，用于将 <font size="7"> 替换为所选字体大小的 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：http://jsfiddle.net/wfaLa3h0/6/

【讨论】：

是的！非常感谢，这非常有效！谢谢谢谢！！
当您在 Chrome 中查看它时会出现轻微的扭结，它会在您更改字体大小的前几次正常工作，然后它会突然恢复为你不能再改了吗？
@IAMABANANA 我已经修好了；显然，HTML 编辑器并不总是知道所选文本的正确“commonAncestorContainer”是什么。将$("font[size]", $('#txtEditor').data('currentRange')['commonAncestorContainer']) 更改为$("#contentarea font[size]")。
在 Firefox 中试过这个，有一个错误。它确实改变了字体大小，但它正在改变已经输入的文本的字体大小