加 標簽到textarea中的選定文本

Question

如何創建一些javascript來執行以下操作 - 當用戶單擊“BOLD”按鈕時，所選文本會包含“<b>”和“</ b>”。

 <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> 

請幫我創建支持幾乎Web瀏覽器的java腳本

Answer 1

您應該使用現有的富文本編輯器，它們是可配置的，因此您只能為用戶提供您希望它們使用的功能。 它們還具有在各種不同瀏覽器中工作的額外好處。

僅使用Bold，Italic和Underline設置tinyMCE的示例。

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

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

Answer 2

請嘗試以下給出的腳本......

<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>

我在http://jsfiddle.net/VRqU3/上試過腳本。 請檢查一下。

我希望它對你有用，謝謝你，

Answer 3

如果不是IE <9，這將是相對簡單的，它不支持textarea元素的selectionStart和selectionEnd屬性。 以下是我之前的答案，詳細說明了如何執行此操作：

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

Answer 4

試試這個功能：

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;
}

示例： http ： //jsbin.com/ilecug/
資料來源： http ： //jsbin.com/ilecug/edit