Javascript document.execCommand（）字体大小（以像素为单位）？

如何使用

document.execCommand

将字体大小更改为30px（例如）

这：

---

不起作用，因为在函数execCommand的第3个参数中，它只允许我输入介于1到7之间的值。

这是

FontSize

命令的限制。我可以想到多种选择：

• 您可以使用CSS类代替，并使用my library的模块
• 您可以使用一种黑客方法，比如调用

  document.execCommand（“fontSize”，false，“7”）

  然后查找命令创建的元素，并根据需要对其进行更改。请参见示例：。这显然取决于文档中没有其他大小为7的
  元素，而且它还依赖于浏览器使用
  元素作为字体大小，看起来它们都这样做了

---

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

只需用元素替换elem，并用所需的值编辑字体大小

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

---

功能

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

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

---

只需使用css覆盖它：

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

或者，如果使用SCS，则可以使用循环生成1到7之间的所有选择器：

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

---

这只是我的解决方案。它与chrome一起工作。 该代码可在中国网站（eqsui）上找到

首先

然后

注: fontsize pass to execCommand必须至少为“12px”及以上。

$（文档）.ready（（）=>{
var-activeFontSize=30；
var oDoc=document.getElementById（“编辑器”）；
var style=document.createElement（“样式”）；
document.body.appendChild（样式）；
函数setFontSize（值）{
$editor.focus（）；
document.execCommand（“fontsize”，false，20）；
activeFontSize=值；
createStyle（）；
updateTags（）；
}
函数updateTags（）{
var fontElements=oDoc.getElementsByTagName（“字体”）；
对于（变量i=0，len=fontElements.length；i{
setFontSize（$fontSize.val（））
})
$editor.on（“keyup”，（）=>{
updateTags（）；
})
//var i=0；
$editor.on（“键控鼠标向下”，（e）=>{
//i++；
//console.log（“e.target”，e.target）
试一试{
var fontsize=$（window.getSelection（）.getRangeAt（0.startContainer.parentNode）.css（“字体大小”）
fontsize=fontsize.replace（“px”和“”）；
//document.execCommand（“insertHTML”，false，'X'）；
//var fontsize=$（e.target）.css（“字体大小”）/$editor.find（“.font-size-detector”+i）.css（“字体大小”）；
//document.execCommand（“undo”、false、false）；
//$editor.focus（）；
//console.log（“fontsize”，fontsize）
updateToolBar（{fontsize}）
}捕获（e）{
console.log（“异常”，e）
}
})
oDoc.focus（）；
设置字体大小（30）；
})

.editor box{box shadow:0px 0px 1px 2px#DDD；最大宽度：500px；边距：0px auto；}
.editor工具{填充：20px；框阴影：0px 2px 1px 0px#DDD}
.editor工具按钮{用户选择：无；}
#编辑器{高度：200px；边距：10px 0px；填充：10px；字体大小：14px；}
#编辑：焦点{大纲：无}

字体大小：
10px
12px
14px
20px
22px
30px
35px
40px
45px
50px
您好，这是一些可编辑文本

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

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

总之，我们只需使用execCommand将所选内容包装成一个span，以便后续对getSelection（）的调用将突出显示的span作为父项。然后我们只需将fontSize样式添加到标识的跨度中

在这里，当我们使用fontSize命令时，它不会被包装在

中，而是包装在

中

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

---

下面是一个live

在纯JavaScript中找到的解决方案，该解决方案适用于具有自定义HTML（颜色、字体系列）的多行

获取文档的选择。解析所选内容并保存其中的html标记。然后使用document.execCommand将所选html插入具有内联样式的div中。使用document.execCommand（'insertHTML'，false，html）的另一个好处是可以在所见即所得编辑器中撤消

这就是功能：

function fontSize(size) {

    var sel = document.getSelection(); // Gets selection

    var selectedHtml = "";
    if (sel.rangeCount) {
        var container = document.createElement("div");
        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
            container.appendChild(sel.getRangeAt(i).cloneContents());
        }
        const children = container.getElementsByTagName("*")
        for(let child of children) {
            if(child.style.fontSize) {
                child.style.fontSize = `${size}px`
            }
        }
        selectedHtml = container.innerHTML;
    }

    let html = `<div style="font-size: ${size}px;">${selectedHtml}</div>`
    document.execCommand('insertHTML', false, html);
}

函数字体大小（大小）{
var sel=document.getSelection（）；//获取选择
var selectedHtml=“”；
如果（选择范围计数）{
var container=document.createElement（“div”）；
对于（变量i=0，len=sel.rangeCount；i

---

希望有帮助。

这在mozilla firefox中有效，但在ieIt中不起作用。它会删除所选内容中的任何其他HTML/CSS！它与编辑器undo/redo配合得好吗？我粗略地尝试了一下，效果很好。是的，这很容易实现，您只需用其内容（innerHTML）替换跨度（在本例中为字体）。假设你有m，你只需要把它替换成innerHTM

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

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

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

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

function fontSize(size) {

    var sel = document.getSelection(); // Gets selection

    var selectedHtml = "";
    if (sel.rangeCount) {
        var container = document.createElement("div");
        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
            container.appendChild(sel.getRangeAt(i).cloneContents());
        }
        const children = container.getElementsByTagName("*")
        for(let child of children) {
            if(child.style.fontSize) {
                child.style.fontSize = `${size}px`
            }
        }
        selectedHtml = container.innerHTML;
    }

    let html = `<div style="font-size: ${size}px;">${selectedHtml}</div>`
    document.execCommand('insertHTML', false, html);
}