Question

我花了大约2个小时搜索javascript，这将为我提供为textarea添加新的“onclick，插入文本”按钮的简单选项，但不幸的是我无法找到我要找的东西。

我有textarea：

<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”按钮时，它应该在textarea中添加/插入：[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>

Answer 2

在textarea中附加文字：

<script type="text/javascript"> 
function formatText(tag) {
   var Field = document.getElementById('mytextarea');
   var val = Field.value;
   var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);
   var before_txt = val.substring(0, Field.selectionStart);
   var after_txt = val.substring(Field.selectionEnd, val.length);
   Field.value += '[' + tag + ']' + '[/' + tag + ']';
}
</script> 

<form name="my_form"> 
    <textarea id="mytextarea"></textarea><br /> 
    <input type="button" value="youtube" onclick="formatText ('youtube');" /> 
    <input type="button" value="dailymotion" onclick="formatText ('dailymotion');" /> 
    <input type="button" value="vimeo" onclick="formatText ('vimeo');" /> 
</form>

替换textarea中的文字：

<script type="text/javascript"> 
function formatText(tag) {
   var Field = document.getElementById('mytextarea');
   var val = Field.value;
   var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);
   var before_txt = val.substring(0, Field.selectionStart);
   var after_txt = val.substring(Field.selectionEnd, val.length);
   Field.value = '[' + tag + ']' + '[/' + tag + ']';
}
</script> 

<form name="my_form"> 
    <textarea id="mytextarea"></textarea><br /> 
    <input type="button" value="youtube" onclick="formatText ('youtube');" /> 
    <input type="button" value="dailymotion" onclick="formatText ('dailymotion');" /> 
    <input type="button" value="vimeo" onclick="formatText ('vimeo');" /> 
</form>

<强>实施例

追加：http://jsfiddle.net/aSgFa/

替换：http://jsfiddle.net/bAQEs/

此外：

<script type="text/javascript"> 
function formatText(tag) {
   var Field = document.getElementById('user-submitted-content');
   var val = Field.value;
   var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);
   var before_txt = val.substring(0, Field.selectionStart);
   var after_txt = val.substring(Field.selectionEnd, val.length);
   Field.value += '' + tag + '';
}
</script>

<div class="buttons">
    <input type="button" value="youtube" onclick="formatText ('[video]YouTubeURL[/video]\n[description]Write your description[/description]');" />  
</div>

Onclick，将短代码/ bbcode添加到textarea？

2 个答案: