在第一次點擊時顯示開始標記，在第二次時顯示結束標記

Question

我有將此標記放置到textarea中的功能。現在它會在點擊的同時放置兩個標籤（開放和關閉）。

工作演示：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>