切换/取消切换字体大小 document.execCommand

Question

我正在这里使用 contenteditable 编写一个小脚本。

它是切换/取消切换粗体、下划线、斜体，但我不能让它取消切换字体大小。它切换它，然后保持这种状态。

工作演示：https://jsfiddle.net/zesaj9ck/2/

<button id="toggle_bolt" onclick="document.execCommand('italic');">toggle italic</button>
<button id="toggle_bolt" onclick="document.execCommand('underline');">toggle underline</button>
<button id="toggle_bolt" onclick="document.execCommand('fontSize', false, 7);">toggle size</button>

<div id="wmd-input" contenteditable="true"></div>

Answer 1

在第一次点击后它根本没有“切换”或改变，因为每次点击只是将大小设置为 7。字体大小不仅有粗体、斜体和下划线两种状态。下面的工作示例改为从输入中获取指定的大小值。

我还建议将您的点击处理程序移至函数，就像我对 changeSize 函数所做的那样。这样可以更清晰地分离关注点并提高可维护性。

function changeSize(increase) {
  var value = parseInt(document.getElementById('size').value, 10) + (increase ? 1 : -1);
  
  document.execCommand('fontSize', false, value);
  document.getElementById('size').value = value;
}

#wmd-input {
  width : 500px;
  min-height : 100px;
  border : 2px solid;
}

<button id="toggle_bolt" onclick="document.execCommand('bold');">toggle bolt</button>
<button id="toggle_bolt" onclick="document.execCommand('italic');">toggle italic</button>
<button id="toggle_bolt" onclick="document.execCommand('underline');">toggle underline</button>
<button id="toggle_bolt" onclick="changeSize(true)">Size +</button>
<button id="toggle_bolt" onclick="changeSize(false)">Size -</button>
<input id="size" value="4" readonly />
<div id="wmd-input" contenteditable="true"></div>