Question

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

它切换/取消粗体，下划线，斜体，但我无法解开字体大小。它切换它然后它保持这种状态。

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

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

1 个答案: