插入时选择 BBCode 标签之间的文本

Question

所以我有一个textarea，可以选择使用上面的按钮插入 BBCode 标签。

当我点击一个按钮时，它会在它们之间插入带有 "text" 字样的标签。

但是我想要实现的是，当插入标签时，标签之间的文本会被选中/突出显示，就像这样，这样当用户继续输入时，他们就会在标签之间进行书写，并且他们不需要先点击/触摸那里。

这是我当前代码的工作方式/外观：

$("#bbcode li").on("click",".bbcode",function(){
        let textarea = $(this).parent().parent().parent().find("textarea");
        let tag = $(this).attr("data-tag");
        let text = tag == "hr" ? "" : "text";

        let selectStart = textarea[0].selectionStart;
        let selectEnd = textarea[0].selectionEnd;
        let selObj = document.getSelection(); 
        let selectedText = selObj.toString();
        let insert;

        let allText = textarea.val();
        let sel = allText.substring(selectStart, selectEnd);

        if (selectedText.length != 0) {
            let insert=allText.substring(0, selectStart)+"["+tag+"]  "+sel+"  [/"+tag+"]"+allText.substring(selectEnd, allText.length);
            textarea.val(insert);
        } 
        else{
            insert = "["+tag+"]   "+text+"   [/"+tag+"]";
            insertBBC(textarea,insert);
        }
        textarea.focus();
    });
    
    function insertBBC(textarea,insert){
        let cursorPos = textarea.prop('selectionStart');
        let v = textarea.val();
        let textBefore = v.substring(0,  cursorPos );
        let textAfter  = v.substring( cursorPos, v.length );
        textarea.val(textBefore+insert+textAfter);
    }

textarea{
height:200px;width:500px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul style="background: white;" id="bbcode" class="m-0 p-0 list-unstyled bg-light">

				<li class="mb-1 d-inline-block">
					<button data-tag="b" value="bold" title="bold" class="bg-light text-dark  bbcode m-0 p-1 border-0">
						<i class="fas fa-bold"></i>
					</button>
				</li>

				<li class="mb-1 d-inline-block">
					<button data-tag="i" value="italic" title="italic" class="bg-light text-dark  bbcode m-0 p-1 border-0">
						<i class="fas fa-italic"></i>
					</button>
				</li>

				<li class="mb-1 d-inline-block">
					<button data-tag="u" value="underline" title="underline" class="bg-light text-dark  bbcode m-0 p-1 border-0">
						<i class="fas fa-underline"></i>
					</button>
				</li>

				<li class="mb-1 d-inline-block">
					<button data-tag="s" value="strikethrough" title="strikethrough" class="bg-light text-dark  bbcode m-0 p-1 border-0">
						<i class="fas fa-strikethrough"></i>
					</button>
				</li>
       </ul>
<textarea></textarea>

变量text 包含单词“text”，所以我应该强制选择它，但不幸的是我不知道该怎么做。

我想避免堆叠这些选择，所以最好只选择最后插入的文本。

PS：请不要尝试完全更改代码。即使它不是最好的，我仍然需要它。

Answer 1

我在搜索时找到了一个很好的解决方案。找到了这个Jquery plugin，非常好。真的很简单，很容易理解，而且效果很好。