Textarea用Javascript切换选择标签

我正在研究BBcode编辑器，并想知道如何使用Javascript切换选择标签（类似于文本编辑菜单在StackOverflow上的工作方式）。

例：

多行文本

Lorem ipsum dolor sit amet. 

如果您选择文本’ipsum dolor’并单击粗体按钮，它将变为

 Lorem [b]ipsum dolor[/b] sit amet. 

如果再次单击粗体按钮，它将删除标记。

谢谢！

Answer 1

您可以获取所选的文本插入位置，设置插入符然后插入文本：

TL; DS（太长没滚动）

有一个TL; DR在底部。

获得Caret职位

 function getInputSelection(el) { var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange; if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { start = el.selectionStart; end = el.selectionEnd; } else { range = document.selection.createRange(); if (range && range.parentElement() == el) { len = el.value.length; normalizedValue = el.value.replace(/\r\n/g, "\n"); // Create a working TextRange that lives only in the input textInputRange = el.createTextRange(); textInputRange.moveToBookmark(range.getBookmark()); // Check if the start and end of the selection are at the very end // of the input, since moveStart/moveEnd doesn't return what we want // in those cases endRange = el.createTextRange(); endRange.collapse(false); if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { start = end = len; } else { start = -textInputRange.moveStart("character", -len); start += normalizedValue.slice(0, start).split("\n").length - 1; if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { end = len; } else { end = -textInputRange.moveEnd("character", -len); end += normalizedValue.slice(0, end).split("\n").length - 1; } } } } return { start: start, end: end }; } 

设置插入位置

 function setCaretPosition(elemId, caretPos) { var elem = document.getElementById(elemId); if(elem != null) { if(elem.createTextRange) { var range = elem.createTextRange(); range.move('character', caretPos); range.select(); } else { if(elem.selectionStart) { elem.focus(); elem.setSelectionRange(caretPos, caretPos); } else elem.focus(); } } } 

插入文字

 function insertTextAtCaret(el, text) { var pos = getSelectionBoundary(el, false); var newPos = pos + text.length; var val = el.value; el.value = val.slice(0, pos) + text + val.slice(pos); setSelection(el, newPos, newPos); } 

做插入

 var pos = getInputSelection($('#textboxID')); setCaretPosition($('#textboxID'), pos.start); insertTextAtCaret($('#textboxID'), '[b]'); setCaretPosition($('#textboxID'), pos.end); insertTextAtCaret($('#textboxID'), '[/b]'); 

然后要撤消它，只需在单击按钮时检查文本选择，如果它包裹在您单击的内容中（例如[b] … [/ b]，单击B按钮时），则只需删除该文本文本框选择。

TL; DR

获取降价插件，而不是http://markitup.jaysalvat.com/home/

或者看看这些http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors