document.execCommand()FontSize以像素为单位？

Question

如何使用document.execCommand？将字体大小更改为30px(例如)？

这个:

document.execCommand("fontSize", false, "30px");

不起作用,因为在函数execCommand的第三个参数中,它只允许我在1到7之间输入一个值.

Answer 1

这是FontSize命令的限制.我能想到各种各样的选择:

• 您可以使用CSS类,并使用我的Rangy库的CSS类应用程序模块;
• 您可以使用hacky方法,例如调用document.execCommand("fontSize", false, "7");然后查找命令创建的元素并根据需要更改它们.参见示例:http://jsfiddle.net/S3ctN/.这显然取决于<font>文档中没有其他大小为7的元素,并且它还依赖于浏览器使用<font>字体大小的元素,它们似乎都是这样做的.

Answer 2

功能

var execFontSize = function (size, unit) {
    var spanString = $('<span/>', {
        'text': document.getSelection()
    }).css('font-size', size + unit).prop('outerHTML');

    document.execCommand('insertHTML', false, spanString);
};

执行

execFontSize(30, 'px');

Answer 3

第二个答案建议在execcommand之后运行一些jquery并用自己的标记替换标记.

只需将elem替换为您的元素,然后使用所需的值编辑font-size.

jQuery("font[size]", elem).removeAttr("size").css("font-size", "10px");

Answer 4

只需用 css 覆盖它：

font[size='7']{
    font-size: 20px; // or other length unit
}

或者，如果您使用 scss，您可以使用循环来生成从 1 到 7 的所有选择器：

@for $i from 1 to 7 {
    font[size='#{$i}']{
        font-size: $i * 2vw
    }
}

Answer 5

这是一个比这里提出的许多解决方案更好的解决方案，因为它直接从所选文本中获取要更改字体大小的元素。

因此，它不必浏览 DOM 来获取正确的元素，也不需要禁止使用特定的 fontSize（7，如已接受答案的第一个选项和其他答案中所建议的）。

function changeFont() {
    document.execCommand("fontSize", false, "7");
    var fontElements = window.getSelection().anchorNode.parentNode
    fontElements.removeAttribute("size");
    fontElements.style.fontSize = "30px";
}

总之，我们只是使用 execCommand 用 span 包装选择，以便随后对 getSelection() 的调用将突出显示的 span 作为 parent 。然后我们只需将 fontSize 样式添加到该标识的跨度。

在这里，当我们使用 fontSize 命令时，它不会被包裹在 a 中<span>，而是包裹在 a 中<font>。

但这是一个通用方法，它可以与 execCommand 的任何命令一起使用，后者被用作一种方便的方式，即使在不同的元素之间也可以包装所选内容。

这是一个现场演示

Answer 6

它只是我的解决方案。它适用于 chrome。该代码是在中国网站（eqxiu）中找到的。

第一的

document.execCommand("styleWithCSS", 0, true);
document.execCommand('fontSize', 0, '12px');

然后

jQuery.find('[style*="font-size: -webkit-xxx-large"],font[size]').css("font-size", "12px")

注意：传递给 execCommand 的 fontsize 必须至少为 '12px' 及以上。