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

【问题标题】：I want to select specific text from textarea and make it bold, italic or make an hyperlink in reactjs我想从 textarea 中选择特定文本并将其设为粗体、斜体或在 reactjs 中创建超链接
【发布时间】：2019-06-25 02:33:11
【问题描述】：

我正在使用 textarea 来制作一个编辑器，并希望实现对选定文本的粗体、斜体或超链接。现在，如果我将其设为粗体或斜体，则效果会出现在整个框中。我想限制它并仅将其保留为选定的文本。我能够从 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}
 />

【问题讨论】：

您实际上是在尝试重新创建 TinyMCE。这是一项相当大的任务，对于一个 stackoverflow 问题来说非常重要。
在某种程度上是的，但我只想将所选文本加粗并在其上放置一个超链接。我得到了选定的文本，但我没有得到如何使其加粗并在其上放置链接。
您不能将 textarea 的部分文本或链接设为粗体。 textarea 只能包含纯文本。您可以让用户通过在文本中插入标签来方便地创建 HTML 源代码，但是如果您想要一个所见即所得的编辑器，您需要找到另一个解决方案。
我建议查看一些降价编辑器，让您了解如何创建编辑器。

标签： javascript html reactjs

【解决方案1】：

你不能用textarea 元素来做到这一点：它们只支持纯文本，不支持 HTML。您将不得不对contenteditable="true" 使用不同的元素。我更喜欢div，但其他人也可以。

【讨论】：

contenteditable div 不支持 onChange 属性。所以很难控制元素。有没有支持 onChange 的替代方案？？

【解决方案2】：

textarea 元素无法呈现 HTML。您可以使用与 React 兼容的 WYSIWYG 编辑器，如下所示：

1) 媒体编辑 - https://github.com/yabwe/medium-editor

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

或使用 <div> 和 contentEditable=true 并在其中呈现 HTML。

【讨论】：