我想從textarea中選擇特定文本並將其設為粗體，斜體或在reactjs中創建超鏈接

Question

我正在使用textarea進行編輯，並想要對所選文本實施粗體，斜體或超鏈接。 現在，如果我將其設為粗體或斜體，則效果會顯示在整個框中。 我想將其限制為僅保留選定的文本。 我可以從文本區域中獲取選定的文本，我無法使其變為粗體或斜體，或者無法在所選任務上添加鏈接，因為document.execCommand在reactjs中不起作用。

我正在通過getSelectionTxt（）函數從textarea獲取選定的文本，但是使用此text_to_hyperlink，它將用錨標記和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 ，但其他人也可以。

Answer 2

textarea元素無法呈現HTML。 您可以使用與React兼容的WYSIWYG編輯器，例如以下一種：

1）中型編輯器-https: //github.com/yabwe/medium-editor

2）Draft.js- https: //draftjs.org/

或使用帶有contentEditable=true的<div>並在其中呈現HTML。