我正在研究BBcode编辑器,并想知道如何使用Javascript切换选择标签(类似于文本编辑菜单在StackOverflow上的工作方式)。
例:
多行文本
Lorem ipsum dolor sit amet.
如果您选择文本’ipsum dolor’并单击粗体按钮,它将变为
Lorem [b]ipsum dolor[/b] sit amet.
如果再次单击粗体按钮,它将删除标记。
谢谢!
您可以获取所选的文本插入位置,设置插入符然后插入文本:
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(/rn/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
获取降价插件,而不是https://markitup.jaysalvat.com/home/
或者看看这些https://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors
以上就是jQuery教程分享Textarea用Javascript切换选择标签相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/541249.html