Hochgestellt auf die Auswahl mit JavaScript

Question

Kann mir jemand helfen, wie kann ich hochgestellt auf die Auswahl in meinem Inhalt editierbare div mit Javascript anwenden?

Ich habe dieses div und eine Schaltfläche:

<div contenteditable="true">Apple Grapes Orange</div> 
<input type="button" onclick="applySuperScript" value="Apply SuperScript"> 

Angenommen, wenn ich den Text „Orange“ von meinem Gehalt editierbare div und klicken Sie auf die Schaltfläche ausgewählt haben, Javascript, sollte Super-Skript aufgerufen werden, um den Text zu übernehmen "Orange".

Answer 1

Geringfügige Änderung des HTML.

<div id='text' contenteditable="true">Apple Grapes Orange</div> 
<input type="button" id='super' value="Apply SuperScript"> 

Dies ist unser Click-Handler

document.getElementById('super').onclick = function() { 
var textarea = document.getElementById('text'); 
var anchorOffset = window.getSelection().anchorOffset; 
var focusOffset = window.getSelection().focusOffset; 
var str = textarea.innerHTML.substring(anchorOffset,focusOffset) 
textarea.innerHTML= textarea.innerHTML.replace(str,'<sup>'+str+'</sup>'); 
}; 

Hier ist die fiddle.