文本编辑难免有些特殊的样式,今天我们就来谈谈怎么给选中的文本添加上标下表(最主要的运用在于数学题的多少方根)
第一步:<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