第一次点击显示开始标签,第二次点击显示结束标签
Show opening tag on first click and closing tag on second
我有这个函数,它将标记放置到文本区域中。现在它会在点击时同时放置两个标签(开始和结束)。
工作演示: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;
};
添加了一个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"> Title </a>
<a class="edit_button" id="b"> B </a>
<a class="edit_button" id="i"> <i>I</i> </a>
<a class="edit_button" id="u"> <u>U</u> </a>
<a class="edit_button" id="del"> <del>S</del> </a>
<textarea id="wmd-input"></textarea>
相关文章:
- 如何使多个标签显示在JQuery范围滑块中
- 如何使用 JavaScript 向我的
标签显示图像
- DIV 标签显示:内联块;
- 安卓上的html5视频标签显示黑屏
- 高图表.js如何强制 x 轴标签显示所有月份,无论图表大小如何
- 如何在javascript中将服务器端标签显示更改为Block
- 为什么用Javascript RegEx在文本周围包装标签会将标签显示为文本
- 锚点标签显示完整链接问题
- 如何通过按下标签显示隐藏内容使用选择器
- Internet Explorer中的选项标签显示块/无
- js标签显示所有菜单项的最后一个条目的标签
- 过滤一个html页面,所以只有某些标签显示
- 使用angularjs和ionic通过html img标签显示图像
- Sencha不能在控制器中触发我的标签显示事件
- 用html标签显示javascript变量值
- jQuery进度条标签显示“false”
- Highcharts响应式数据标签显示
- 检测标签显示,移除类隐藏
- ZingChart x轴标签显示为数字而不是字符串
- 需要帮助在Div标签显示曲线边界以上的Img