I spent about 2 hours in searching for javascript which will give me easy options of adding new "onclick, insert text" buttons for textarea, but unfortunatelly I couldn't find what I am looking for.
I have textarea:
<textarea name="user-submitted-content" rows="5" data-required="true" placeholder="<?php _e('Post Content', 'usp'); ?>" class="usp-textarea"></textarea>
I want javascript something like this:
var newText = "[" + shortcode + "]" + selectedText + "[/" + shortcode + "]";
And than I can add buttons like:
<input type="button" value="youtube" onclick="formatText ('youtube');" />
<input type="button" value="text" onclick="formatText ('text');" />
When I click button "youtube" it should add/insert: [youtube][/youtube]
in textarea.
Above codes I took from one example of javascript which sorrounds selected text in textarea with tags:
<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>
With a couple of changes, I think it can be used also for this what I want. I really need this.
If am not wrong , you where looking for this
JS: Sample 1-
$("#btnYoutube").on('click', function () {
var setText = "[youtube][/youtube]";
$("#txtarea").val(setText);
});
$("#btnTxt").on('click', function () {
var setText = "[text][/text]";
$("#txtarea").val(setText);
});
Sample 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>