javascript - 第一次点击时显示开始标签，第二次点击时显示结束标签

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this question

我有一个将标签放入文本区域的函数。现在，它会在单击时同时放置两个标签(打开和关闭)。

工作演示:http://jsfiddle.net/gyky8qca/1/

我希望它在一次点击时显示开始标签，在另一次点击时显示结束标签。因此，例如，如果单击“粗体”，它应该显示 <b>那么如果再次单击它应该显示 </b> 。与其他按钮相同。

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;
};

Answer 1

添加了一个 counter 对象来计算这次点击是打开标签还是关闭标签。

var counter = {}
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
  counter[tag] = counter[tag] || 0;
  
  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 = counter[tag] ? r.text + end : start + r.text;
    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 - (counter[tag] ? end.length : 0);    // 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 = counter[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);

    // Place the cursor between formats in #txta
    if(counter[tag])
      txta.setSelectionRange((endPos),(endPos));
    else
      txta.setSelectionRange((endPos+start.length+1),(endPos+start.length+1));
    
    txta.focus();
  }
  
  counter[tag]++;
  counter[tag]%=2;
  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;
};

.edit_button {
    display: inline-block;
    color: black;
    padding: 5px;
    background: #CCCCCC;
    cursor: pointer;
}
textarea {
    width: 400px;
    height: 50px;
    display: block;
}

<a class="edit_button" id="big">&nbsp;Title&nbsp;</a>
<a class="edit_button" id="b">&nbsp;B&nbsp;</a>
<a class="edit_button" id="i">&nbsp;<i>I</i>&nbsp;</a>
<a class="edit_button" id="u">&nbsp;<u>U</u>&nbsp;</a>
<a class="edit_button" id="del">&nbsp;<del>S</del>&nbsp;</a>


<textarea id="wmd-input"></textarea>