javascript - 我想从文本区域中选择特定文本并将其设置为粗体、斜体或在reactjs中创建超链接

Question

我正在使用 textarea 来制作编辑器，并希望对所选文本实现粗体、斜体或超链接。现在，如果我将其设置为粗体或斜体，效果将在整个框中。我想限制它并将其保留为仅选定的文本。我能够从文本区域获取所选文本，但无法将其设置为粗体或斜体，也无法在所选任务上放置链接，因为 document.execCommand 在reactjs 中不起作用。

我通过 getSelectionTxt() 函数从 textarea 获取选定的文本，但使用此 text_to_hyperlink 它将用 anchor 标记和 url 替换整个文本。

我希望该链接与所选标签相关联。我使用按钮调用此 text_to_hyperlink。

text_to_hyperlink=()=> {
  var text_entry = document.getElementById('textArea');
  var text_selected = this.getSelectionTxt();
  var url = document.getElementById("url").value;
  text_entry.value = '<a href="' + url + '">' + text_selected + '</a>' ;
}    
getSelectionTxt =() => {
   var text = "";
   var activeEl = document.activeElement;
   if (activeEl == "textarea") {
       text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
   } else if (window.getSelection) {
       text = window.getSelection().toString();
   }
   var url = document.getElementById("url").value;
   return text;
}

<textarea
          id="textArea"
          contenteditable="true"
          rows="10"
          value={this.state.value}
          onClick={this.getSelectionTxt}
          onChange={this.handleChange}
 />

Answer 1

您不能使用 textarea 元素执行此操作:它们仅支持纯文本，而不支持 HTML。您必须使用 contenteditable="true" 的不同元素。我更喜欢 div，但其他的也可以。