<!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>

如果这是你的需求并且解决了你的痛点，那请你点个赞或者转载。