更改选定文本 Javascript 的颜色答案

【问题标题】：Change color of a selected Text Javascript更改选定文本 Javascript 的颜色
【发布时间】：2016-01-22 16:24:25
【问题描述】：

当我单击按钮时，我需要更改文本区域中选定文本的文本颜色。

我的第一次尝试：

document.getSelectedText(document.getElementById('test22')).style.color = '#0F0';

我的第二次尝试：

document.getSelectedText((test22.value).substring(test22.selectionStart, test22.selectionEnd)).style.color = '#0F0';

HTML 代码：

<textarea name="area1" cols="40" id="test22"></textarea>
<button onclick="test();">CLICK</button>

谢谢！ ;)

【问题讨论】：

可能与此重复：stackoverflow.com/questions/17288964/…
是的，但我需要这个用于 texarea。这仅适用于“普通”文本。
对不起 :) 我会再帮你看看 :)
这是带有 span 元素的解决方案示例stackoverflow.com/questions/17288964/…

标签： javascript textarea

【解决方案1】：

无法在 Textareas 中进行设置，因为它们不是 RTF 编辑器。

您可以将 contenteditable="true" 标记与 div 一起使用并在那里发挥作用，就像在这里和那里设置“font”标记一样。

您也可以使用 https://www.tinymce.com 或 http://ckeditor.com 之类的东西。两者都是所见即所得的编辑器。或者在 github 上搜索任何轻量级的 RTF-Editor。

也许你可以从中得到一些想法：http://dipaksblogonline.blogspot.in/2014/11/javascript-text-selection-popover.html

【讨论】：

【解决方案2】：

这是一个选项吗？

Demo - codepen.io

document.querySelector(".my-button").addEventListener("click", myFunction);

function myFunction() {
let elem = document.querySelector("#note_text");
  elem.classList.add("add-color");
  elem.focus();
}

#note_header::selection {
  color: red;
}

.add-color::selection {
  color: red;
}

<h3>Level - 1</h3>

<textarea id="note_header" rows="7" cols="70">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</textarea><br>

<h3>Level - 2</h3>

<textarea id="note_text" rows="7" cols="70">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</textarea><br>
<button class="my-button">CLICK</button>

【讨论】：