使用谷歌瀏覽器中的jquery增加和減少iframe標簽內所選/突出顯示文本的字體大小

Question

我使用execCommand()來增加和減少所選/突出顯示文本的字體大小（當我們單擊增量或減量按鈕時，所選文本字體大小增加或減少2px）。

execCommand()在Mozilla Firefox中運行得很好，但它在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> 

您可以使用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> 

備注：上面的代碼示例是針對contenteditable div編寫的，但從概念上講，它與基於iframe的編輯器沒有區別。