javascript - 单击时，将短代码/bbcode 添加到文本区域？

Question

我花了大约 2 个小时来搜索 javascript，它可以让我轻松地选择为 textarea 添加新的“onclick，插入文本”按钮，但不幸的是我找不到我要找的东西。

我有文本区域:

<textarea name="user-submitted-content" rows="5" data-required="true" placeholder="<?php _e('Post Content', 'usp'); ?>" class="usp-textarea"></textarea>

我想要这样的 javascript:

    var newText = "[" + shortcode + "]" + selectedText + "[/" + shortcode + "]"; 

然后我可以添加如下按钮:

<input type="button" value="youtube" onclick="formatText ('youtube');" /> 
<input type="button" value="text" onclick="formatText ('text');" />  

当我单击“youtube”按钮时，它应该在文本区域中添加/插入:[youtube][/youtube]。

以上代码是我从一个 javascript 示例中提取的，它用标签包围了 textarea 中的选定文本:

<script type="text/javascript"> 
<!-- 
    function formatText (tag) { 
        var selectedText = document.selection.createRange().text; 

        if (selectedText != "") { 
            var newText = "[" + tag + "]" + selectedText + "[/" + tag + "]"; 
            document.selection.createRange().text = newText; 
        } 
    } 
//--> 
</script> 

<form name="my_form"> 
    <textarea name="my_textarea"></textarea><br /> 
    <input type="button" value="bold" onclick="formatText ('b');" /> 
    <input type="button" value="italic" onclick="formatText ('i');" /> 
    <input type="button" value="underline" onclick="formatText ('u');" /> 
</form>

通过一些更改，我认为它也可以用于我想要的。 我真的需要这个。

Answer 1

如果没记错的话，你在哪里找的

Sample DEMO 1

Sample DEMO 2

JS:示例 1-

$("#btnYoutube").on('click', function () {
    var setText = "[youtube][/youtube]";
    $("#txtarea").val(setText);
});

$("#btnTxt").on('click', function () {
    var setText = "[text][/text]";
    $("#txtarea").val(setText);
});

示例 2-

 $("input:button").on('click',function(){
    var getTxt=$(this).val();
    var setText='['+getTxt+'] ['+getTxt+']';
    $("#txtarea").val(setText)
});

HTML:

<input id="btnYoutube" type="button" value="youtube" />
<input id="btnTxt" type="button" value="text" />
<br/>
<textarea id="txtarea" name="user-submitted-content" rows="5" data-required="true" class="usp-textarea"></textarea>