Javascript 第一次单击显示开始标记，第二次单击显示结束标记

我有一个功能，可以将标签放入文本区域。现在，它在单击时同时放置两个标记（开始和结束）

工作演示：

我希望它在一次单击上显示一个开始标记，在另一次单击上显示一个结束标记。因此，例如，如果单击粗体，则应显示

，如果再次单击，则应显示

。其他按钮也一样

function addTagSel(tag, idelm) {
var tag_type = new Array('<', '>');        // for BBCode tag, replace with:  new Array('[', ']');
var txta = document.getElementById('wmd-input');
var start = tag_type[0] + tag + tag_type[1];
var end = tag_type[0] +'/'+ tag +  tag_type[1];
var IE = /*@cc_on!@*/false;    // this variable is false in all browsers, except IE

if (IE) {
var r = document.selection.createRange();
var tr = txta.createTextRange();
var tr2 = tr.duplicate();
tr2.moveToBookmark(r.getBookmark());
tr.setEndPoint('StartToEnd',tr2);
var tag_seltxt = start + r.text + end;
var the_start = txta.value.replace(/[\r\n]/g,'.').indexOf(r.text.replace(/[\r\n]/g,'.'),tr.text.length);
txta.value = txta.value.substring(0, the_start) + tag_seltxt + txta.value.substring(the_start + tag_seltxt.length, txta.value.length);

var pos = txta.value.length - end.length;    // Sets location for cursor position
tr.collapse(true);
tr.moveEnd('character', pos);        // start position
tr.moveStart('character', pos);        // end position
tr.select();                 // selects the zone
}
else if (txta.selectionStart || txta.selectionStart == "0") {
var startPos = txta.selectionStart;
var endPos = txta.selectionEnd;
var tag_seltxt = start + txta.value.substring(startPos, endPos) + end;
txta.value = txta.value.substring(0, startPos) + tag_seltxt + '\u200C' + txta.value.substring(endPos, txta.value.length);

// Place the cursor between formats in #txta
txta.setSelectionRange((endPos+start.length),(endPos+start.length));
txta.focus();
}
return tag_seltxt;
}
document.getElementById('big').onclick = function() {
var tag_seltxt = addTagSel('big');
return tag_seltxt;
}
document.getElementById('b').onclick = function() {
var tag_seltxt = addTagSel('b');
return tag_seltxt;
}
document.getElementById('i').onclick = function() {
var tag_seltxt = addTagSel('i');
return tag_seltxt;
}
document.getElementById('u').onclick = function() {
var tag_seltxt = addTagSel('u');
return tag_seltxt;
}
document.getElementById('del').onclick = function() {
var tag_seltxt = addTagSel('del');
return tag_seltxt;
};

函数addTagSel（标记，idelm）{
var tag_type=new Array（“”）；//对于BBCode标记，替换为：new Array（“[”，“]”）；
var txta=document.getElementById（'wmd-input'）；
var start=tag_类型[0]+tag+tag_类型[1]；
var end=tag_type[0]+'/'+tag+tag_type[1]；
var IE=/*@cc_on！@*/false；//此变量在除IE之外的所有浏览器中都为false
如果（即）{
var r=document.selection.createRange（）；
var tr=txta.createTextRange（）；
var tr2=tr.duplicate（）；
tr2.moveToBookmark（r.getBookmark（））；
tr.setEndPoint（'StartToEnd'，tr2）；
var tag_seltxt=start+r.text+end；
var_start=txta.value.replace（/[\r\n]/g'.'）.indexOf（r.text.replace（/[\r\n]/g'.'）、tr.text.length）；
txta.value=txta.value.substring（0，the_start）+tag_seltx+txta.value.substring（the_start+tag_seltx.length，txta.value.length）；
var pos=txta.value.length-end.length；//设置光标位置的位置
tr.collapse（真）；
tr.moveEnd（'字符'，位置）；//开始位置
tr.moveStart（'字符'，位置）；//结束位置
tr.select（）；//选择区域
}
else if（txta.selectionStart | | txta.selectionStart==“0”）{
var startPos=txta.selectionStart；
var endPos=txta.selectionEnd；
var tag_seltxt=start+txta.value.substring（startPos，endPos）+end；
txta.value=txta.value.substring（0，startPos）+tag_seltxt+'\u200C'+txta.value.substring（endPos，txta.value.length）；
//将光标放在#txta中的格式之间
txta.setSelectionRange（（endPos+start.length），（endPos+start.length））；
txta.focus（）；
}
返回标签_selvt；
}
document.getElementById（'big'）。onclick=function（）{
var tag_seltxt=addTagSel（'big'）；
返回标签_selvt；
}
document.getElementById（'b'）。onclick=function（）{
var tag_seltxt=addTagSel（'b'）；
返回标签_selvt；
}
document.getElementById（'i'）。onclick=function（）{
var tag_seltxt=addTagSel（'i'）；
返回标签_selvt；
}
document.getElementById（'u'）。onclick=function（）{
var tag_seltxt=addTagSel（'u'）；
返回标签_selvt；
}
document.getElementById（'del'）。onclick=function（）{
var tag_seltxt=addTagSel（'del'）；
返回标签_selvt；
};

添加了一个

计数器

对象，用于计算此单击是开始标签还是结束标签

var计数器={}
函数addTagSel（标签，idelm）{
var tag_type=new Array（“”）；//对于BBCode标记，替换为：new Array（“[”，“]”）；
var txta=document.getElementById（'wmd-input'）；
var start=tag_类型[0]+tag+tag_类型[1]；
var end=tag_type[0]+'/'+tag+tag_type[1]；
var IE=/*@cc_on！@*/false；//此变量在除IE之外的所有浏览器中都为false
计数器[标签]=计数器[标签]| 0；
如果（即）{
var r=document.selection.createRange（）；
var tr=txta.createTextRange（）；
var tr2=tr.duplicate（）；
tr2.moveToBookmark（r.getBookmark（））；
tr.setEndPoint（'StartToEnd'，tr2）；
var tag_seltxt=计数器[tag]？r.text+end:start+r.text；
var_start=txta.value.replace（/[\r\n]/g'.'）.indexOf（r.text.replace（/[\r\n]/g'.'）、tr.text.length）；
txta.value=txta.value.substring（0，the_start）+tag_seltx+txta.value.substring（the_start+tag_seltx.length，txta.value.length）；
var pos=txta.value.length-（计数器[tag]？end.length:0）；//设置光标位置的位置
tr.collapse（真）；
tr.moveEnd（'字符'，位置）；//开始位置
tr.moveStart（'字符'，位置）；//结束位置
tr.select（）；//选择区域
}
else if（txta.selectionStart | | txta.selectionStart==“0”）{
var startPos=txta.selectionStart；
var endPos=txta.selectionEnd；
var tag_seltxt=计数器[tag]？txta.value.substring（startPos，endPos）+end:start+txta.value.substring（startPos，endPos）；
txta.value=txta.value.substring（0，startPos）+tag_seltxt+'\u200C'+txta.value.substring（endPos，txta.value.length）；
//将光标放在#txta中的格式之间
if（计数器[标签]）
txta.setSelectionRange（（endPos），（endPos））；
其他的
txta.setSelectionRange（（endPos+start.length+1），（endPos+start.length+1））；
txta.focus（）；
}
计数器[标签]+；
计数器[标签]]=2；
返回标签_selvt；
}
document.getElementById（'big'）。onclick=function（）{
var tag_seltxt=addTagSel（'big'）；
返回标签_selvt；
}
document.getElementById（'b'）。onclick=function（）{
var tag_seltxt=addTagSel（'b'）；
返回标签_selvt；
}
document.getElementById（'i'）。onclick=function（）{
var tag_seltxt=addTagSel（'i'）；
返回标签_selvt；
}
document.getElementById（'u'）。onclick=function（）{
var tag_seltxt=addTagSel（'u'）；
返回标签_selvt；
}
document.getElementById（'del'）。onclick=function（）{
var tag_seltxt=addTagSel（'del'）；
返回标签_selvt；
};
。编辑按钮{
显示：内联块；
颜色：黑色；
填充物：5px；
背景:#中交;；
光标：指针；
}
文本区{
宽度：400px；
高度：50px；
显示：块；
}
标题
B
我
U
s
这与地球上几乎所有其他的编辑都背道而驰。你会让你的用户感到困惑。也就是说，在你的问题中，你需要在这里显示你的代码，否则它很可能会被关闭为非主题。哦，太酷了！我能再问你一个问题吗？如何使闪烁的光标正好落在标记后面？现在它降落在标签的中间。我希望它在点击任何一个标签后落地。如果您能让它工作，我们将不胜感激。更改在js的第34行