Javascript - Wie ein Element in contenteditable als execCommand schalten?

Question

Ich möchte B Tag wechseln, wenn ausgewählt:

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

Answer 1

Sie können einfach eine click event listener auf die Schaltfläche hinzufügen, die die execCommand ausführt.

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

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

Wenn Sie den Text innerhalb des contenteditable div auswählen und dann auf die Schaltfläche klicken, wird es entweder wechseln fett oder Nicht-bold; abhängig von seinem aktuellen Status.

Eine Live-Demo finden Sie unter this fiddle.