Javascript 选择内容时用 div 包裹

Question

假设我有一个文本区域和粗体按钮：

<div class="main">
  <textarea  cols="60" rows="12">
     Lorem ipsum dolor sit amet...
  </textarea>
</div>

<br>
<button onclick="bold()">Bold</button>

当我用鼠标 select（突出显示）内容并单击粗体按钮时，我希望它用标签包裹 selection，例如：

<b>content</b>

这就是我目前的情况，但是：

bold = function()  {       
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span = document.createElement("b");     
    span.appendChild(selectedText);
    selection.insertNode(span);
}

我怎样才能使它也与 textrea 一起工作
我怎样才能让它只对主要 div

jsfiddle：https://jsfiddle.net/5feLm4jn/3/

Answer 1

截至今天，无法在 <textarea> 中启用富文本格式。您必须使用带有 contenteditable 属性的 <div>。例如：

<div id="foo" contenteditable> ... </div>

已经提供了完整可行的解释（以及 JSFiddle 示例）：Make selected text bold/unbold

希望对您有所帮助！

Answer 2

使用content editablediv，您可以直接在文档中使用document.execCommand到boldselected text。

片段：

function bold() {
  document.execCommand('bold');
}

function getSelectedText() {
  var html2 = "",
    html_changed = "";
  if (window.getSelection) {
    html2 = window.getSelection().toString();
  } else if (document.selection && document.selection.type != "Control") {
    html2 = document.selection.createRange().text;
  }
  html_changed = "<div>" + html2 + "</div>";
  var temp = document.getElementById("div");
  var temp_text = "";
  temp_text = temp.innerHTML;
  var str = temp_text;
  str = str.replace(html2, html_changed);
  temp.innerHTML = temp_text;
}

<div class="main" contenteditable id="div">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, asperiores quidem ab neque molestias voluptatum amet possimus dolore rem enim error, eaque pariatur adipisci praesentium consequuntur! Rerum maxime eveniet ipsam est voluptas, facere
  sequi cupiditate dolor exercitationem aspernatur distinctio in animi beatae earum! Ducimus provident ipsa vero in natus unde consequuntur ut, sapiente, reiciendis cumque illum exercitationem inventore asperiores enim architecto! Eveniet unde ipsa laudantium
  facilis placeat obcaecati quam magnam quibusdam.
</div>

<br>
<button id="bold" onclick="getSelectedText()">Bold</button>

Javascript 选择内容时用 div 包裹

Javascript when selecting content wrap it with div

javascript

jquery

textarea