使用谷歌浏览器中的jquery增加和减少iframe标签内所选/突出显示文本的字体大小

I used the execCommand() to increase and decrease the font size of selected/highlighted text (while we click the increment or decrement button the selected text font size is increased or decreased by 2px).

我使用execCommand()来增加和减少所选/突出显示文本的字体大小(当我们单击增量或减量按钮时,所选文本字体大小增加或减少2px)。

execCommand() is working perfectly in Mozilla Firefox, but it is not working in Google Chrome. How can I "Increase and Decrease font size of selected/Highlighted text inside the iframe tag using jquery in google chrome browser"?

execCommand()在Mozilla Firefox中运行得很好,但它在Google Chrome中无效。如何“在谷歌浏览器浏览器中使用jquery增加和减少iframe标签内所选/突出显示文本的字体大小”?

1 个解决方案

#1

By definition, FontSize is limited by the standard values from 1 to 7 intepreted as 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large' and 'xx-large' consequently:

根据定义,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>

You can customize this functionality by using a hacky method which calls document.execCommand("fontSize", false, "1"), finds the elements and changes it:

您可以使用hacky方法自定义此功能,该方法调用document.execCommand(“fontSize”,false,“1”),查找元素并对其进行更改:

$(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>

Remark: the above code samples are written for contenteditable div, but conceptually it;s no difference with iframe-based editor.

备注:上面的代码示例是针对contenteditable div编写的,但从概念上讲,它与基于iframe的编辑器没有区别。

#1