javascript - 在 google chrome 浏览器中使用 jquery 增加和减少 iframe 标签内选定/突出显示文本的字体大小

Question

我使用 execCommand() 来增大和减小选定/突出显示文本的字体大小(当我们单击递增或递减按钮时，选定文本的字体大小会增大或减小 2px)。

execCommand() 在 Mozilla Firefox 中运行良好，但在 Google Chrome 中无法运行。如何“在 google chrome 浏览器中使用 jquery 增加和减少 iframe 标签内选定/突出显示文本的字体大小”？

Answer 1

根据定义，FontSize 受限于从 1 到 7 的标准值，解释为“xx-small”、“x-small”、“small”、“medium”、“large”、“x-large”和“xx-large' 因此:

$(document).ready(function(){
  
  var fontSize = 3;
  
  $('#decrease').click(function(){
    if (fontSize > 1)
      fontSize--;
    document.execCommand("fontSize", false, fontSize);
  });
  
  $('#increase').click(function(){
    if (fontSize < 7)
      fontSize++;
    document.execCommand("fontSize", false, fontSize);
  });
})

div{
  margin-top: 16px;
  padding: 4px;
  border: solid 1px gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='decrease' type="button" value="Decrease Font">
<input id='increase' type="button" value="Increase Font">
<div contenteditable="true">Hello, this is some editable text</div>

您可以使用调用 document.execCommand("fontSize", false, "1") 的 hacky 方法来自定义此功能，找到元素并对其进行更改:

$(document).ready(function(){
  
  var fontSize = 16;
  
  $('#decrease').click(function(){
    if (fontSize > 6)
      fontSize-=2;
    document.execCommand("fontSize", false, "1");
    resetFont();
  });
  
  $('#increase').click(function(){
    if (fontSize < 64)
      fontSize+=2;
    document.execCommand("fontSize", false, "1");
    resetFont();
  });
  
  function resetFont(){
    $("font[size=1]").removeAttr("size").css("font-size", fontSize + "px");
  }
})

div{
  margin-top: 16px;
  padding: 4px;
  border: solid 1px gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='decrease' type="button" value="Decrease Font">
<input id='increase' type="button" value="Increase Font">
<div contenteditable="true">Hello, this is some editable text</div>

备注:以上代码示例是为contenteditable div编写的，但在概念上与基于iframe的编辑器没有区别。