我想从textarea中选择特定文本并将其设为粗体，斜体或在reactjs中创建超链接

Question

I am using textarea for making an editor and wanna implement bold, italic or hyperlink to a selected text. Right now, if I am making it bold or italic, the effect is in entire box. I wanna restrict it and keep it to selected text only. I am able to get the selected text from the textarea, I am not able to make it bold or italic or put a link on the selected task as document.execCommand doesn't work in reactjs.

I am getting the selected text from textarea through getSelectionTxt() function but with this text_to_hyperlink it is replacing the entire text with anchor tags and url.

I want to have that link to be associated with the selected tags. I am invoking this text_to_hyperlink with a button.

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

You can't do this with a textarea element: they support plaintext only, and not HTML. You will have to use a different element with contenteditable="true" . I prefer div , but others work as well.

Answer 2

A textarea element cannot render HTML. You could either use a WYSIWYG editor compatible with React like one of these:

1) Medium-Editor - https://github.com/yabwe/medium-editor

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

or use a <div> with contentEditable=true and render HTML inside of it.