使用 JavaScript 将上标应用于选区

Question

任何人都可以帮助我如何使用 javascript 将上标应用于我的可编辑内容 div 中的选择？

我有这个 div 和一个按钮：

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

假设我从我的可编辑内容 div 中选择了文本 "Orange" 并单击按钮，应该调用 javascript 为文本应用超级脚本 "Orange".

Answer 1

对 html 稍作修改。

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

这是我们的点击处理程序

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>');
 };

这里是 fiddle.

使用 JavaScript 将上标应用于选区

Apply superscript to the selection using JavaScript

javascript

superscript