<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="sup()">添加上標</button>
<div contenteditable="true" style="border:1px solid #000;width: 800px;height: 700px" id="texts"></div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
function sup() {
var selection=window.getSelection();
var range=selection.getRangeAt(0);
if(range.collapsed){
return;
}
var sup = '<sup>'+selection.toString()+'</sup>';
range.deleteContents();
var texts = document.getElementById('texts');
var html_t = texts.innerHTML;
texts.innerHTML = html_t+sup;
}
</script>
如果這是你的需求並且解決了你的痛點，那請你點個贊或者轉載。