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/

或将<div>与contentEditable=true一起使用并在其中渲染HTML。

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

2 个答案: