加 标签到textarea中的选定文本

Question

How to create some javascript to do the following - when the user clicks the "BOLD" button, the selected text gets a "<b> " and a " </b>" wrapped around it.

 <form name="my">
<textarea name="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> 

please help me to create java-script for supporting almost web browser

Answer 1

You should use an existing rich text editor, they are configurable so you can give users only the features what you want them to use. They also have the added benefit of working across a range of different browsers.

An example of setting up tinyMCE with only Bold, Italic and Underline.

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline"
});

Answer 2

Please try script given below...

<script>
 function formatText (key){

    var elem = document.my.textarea; 
    /*start of selection area*/ 
    var start = elem.selectionStart;
    var end = elem.selectionEnd;
    var len = elem.value.length;
    var sel_txt = elem.value.substring(start,end);

    if (sel_txt != ""){
      var begin_tag = "<"+key+">"; 
      var close_tag =  "</"+key+">";
      var replace = begin_tag + sel_txt + close_tag;
      elem.value = elem.value.substring(0,start) + replace + elem.value.substring(end,len);
   }
</script>

I have tried script on http://jsfiddle.net/VRqU3/ . Please check it.

I hope it will be work for you, thank you,

Answer 3

This would be relatively simple were it not for IE < 9, which does not support selectionStart and selectionEnd properties of textarea elements. Here's a previous answer of mine detailing how to do this:

https://stackoverflow.com/a/10739034/96100

Answer 4

Try this function:

function formatText(tag) {
   var Field = document.getElementById('text');
   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 = before_txt + '<' + tag + '>' + selected_txt + '</' + tag + '>' + after_txt;
}

Example: http://jsbin.com/ilecug/
Source: http://jsbin.com/ilecug/edit