时间戳

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

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

问题描述

我正在使用 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}
 />

标签： javascripthtmlreactjs

解决方案

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

推荐阅读