Javascript - 如何切換contenteditable中的元素爲execCommand？

Question

我想切換乙標籤，如果選擇：

<div contenteditable="true"> 
<p><b>Zeffer !</b></p> 
</div> 
<button id="bold">Bold</button> 

Answer 1

您可以簡單地添加一個click event listener的按鈕，執行execCommand。

var bold = document.getElementById('bold'); 

bold.addEventListener('click', function() { 
    document.execCommand('bold', false, null); 
}); 

當選擇contenteditable DIV中的文本，然後點擊按鈕，就會切換到或者粗體或非粗體;取決於其目前的狀態。

請參閱this fiddle進行現場演示。