在文本区域中，对所选文本添加<b></b>标签

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> 

请帮我创建支持几乎所有网络浏览器的JavaScript代码。

- user1065050

---

你为什么不使用预制的富文本编辑器？ - avramov

为什么要重复造轮子呢？谷歌搜索“php javascript 富文本编辑器”，然后挑选你喜欢的。 - GDP

@user：这是一个非常不平凡的任务。你应该真正地采用现有的解决方案并根据自己的需求进行调整，而不是自己开发完整的解决方案。 - Niklas B.

请参见https://dev59.com/X1TTa4cB1Zd3GeqPoQXJ。 - Stecman

@Stecman 这在IE中不起作用。 - user1065050

Answer 1

您应该使用现有的富文本编辑器，它们是可配置的，因此您可以仅向用户提供您想要他们使用的功能。它们还具有在各种不同浏览器上工作的额外好处。

以下是一个设置 TinyMCE 仅包含加粗、斜体和下划线的示例。

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

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

- JonWarnerNet

---

我不知道TinyMCE提供了他们的脚本的轻量级版本，并且这些脚本如此可定制。我已经搜索了几个小时，甚至尝试自己创建一个，我很感激找到这个提示！ - Mafia

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/上尝试了脚本，请检查一下。

希望它能对您有用， 谢谢。

- Er. Anurag Jain

Answer 3

如果不考虑IE < 9，这将相对简单，因为它不支持textarea元素的selectionStart和selectionEnd属性。以下是我之前回答过的详细说明：

https://dev59.com/eGTWa4cB1Zd3GeqPAzXX#10739034

- Tim Down

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

- Victor