Textarea使用Javascript切换选择标签

或查看这些 http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors I'm working on a BBcode editor, and was wondering how to toggle tags on selection using Javascript (similar to how the text editing menu works on StackOverflow).Example:TextareaLorem ipsum dolor sit amet.If you select the text 'ipsum dolor' and click on the bold button, it'll becomeLorem [b]ipsum dolor[/b] sit amet.If you click the bold button once again, it'll remove the tags.Thanks! 解决方案 You can get the selected text caret positions, set the caret and then insert your text:TL;DS (Too long didn't scroll)There's a TL;DR at the bottom.Get Caret Positionsfunction 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 };}Set Caret Positionfunction 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(); } }}Insert Textfunction 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);}Do Your Insertingvar pos = getInputSelection($('#textboxID'));setCaretPosition($('#textboxID'), pos.start);insertTextAtCaret($('#textboxID'), '[b]');setCaretPosition($('#textboxID'), pos.end);insertTextAtCaret($('#textboxID'), '[/b]');Then to undo it, just check the text selection when they click the button, and if its wrapped in the thing you clicked (eg [b]...[/b], when clicking the B button) then just remove that text from the textbox selection.TL;DRGet a markdown plugin instead http://markitup.jaysalvat.com/home/or look at these http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors 这篇关于Textarea使用Javascript切换选择标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！