html编辑器给选中文本加上标下表

文本编辑难免有些特殊的样式，今天我们就来谈谈怎么给选中的文本添加上标下表（最主要的运用在于数学题的多少方根）

      第一步：<script type="text/javascript" src="js/jquery.min.js" ></script>引入JQ文件，咋合理JQ的版本不受限制

      第二部：基本的html结构：

                      <div class="content">
<div class="up_down">
<div class='btn-group' id='editCon'>
<a class='btn' data-role='subscript' href='#'>下标</a>
<a class='btn' data-role='superscript' href='#'>上标</a>
   </div>
           <div class='editor' contenteditable>
222+670+233=876
</div>
</div>

<div class="up_down">
<div class='btn-group' id='editCon'>
<a class='btn' data-role='subscript' href='#'>下标</a>
<a class='btn' data-role='superscript' href='#'>上标</a>
   </div>
           <div class='editor' contenteditable>
222+670+233=876
</div>
</div>
</div>

      第三部：设置一个CSS样式（本例的CSS样式有点丑请接受）

                   body {
background-color:yellow;
color: #000;
}
.content {
margin: 100px;
}
.editor {
resize:vertical; 
overflow:auto; 
border:1px solid silver; 
border-radius:5px; 
min-height:200px;
box-shadow: inset 0 0 10px silver;
padding:1em;
}

            第四步按需加载JQ代码：

                 $(function() {
/*是否鼠标选中需要上下标的文字*/
var funcGetSelectText = function(){
        var txt = '';
if(document.selection){
txt = document.selection.createRange().text;//ie
}else{
txt = document.getSelection();
}
       return txt.toString();
        }
$('.up_down a').click(function(e) {
var txt = funcGetSelectText();
//如果是有文字存在那么根据角色加对应上下标
if(txt){
document.execCommand($(this).data('role'), false, null);
$("sup").attr("contenteditable",false);
$("sub").attr("contenteditable",false);

}else{
alert("选中文字后点击上标下标");
return false;
}

})

});

    

       本例运用到两个关键函数：document.getSelection()和document.execCommand($(this).data('role'), false, null);详情请参见以下网址深入了解哦！

           https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

          https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection