有没有办法在文本区域内有不同颜色的文本？答案

【问题标题】：Is there a way to have different colored text inside a textarea?有没有办法在文本区域内有不同颜色的文本？
【发布时间】：2021-10-05 13:19:27
【问题描述】：

我有一个 HTML 文本区域，其中包含一个定制的实时可编辑 JSON 文件，您可以在其中实时查看编辑结果。我还有一些东西可以循环遍历“points”属性中的条目，这是一个列表，它在画布中显示 JSON 结果的结果，这样人们就可以看到正在选择的点。

我希望 textarea 中的点能够在选择时进行格式化，例如 textarea JSON 中的选定点突出显示为黄色或将文本颜色更改为蓝色或类似的东西。

我试过这个：

<textarea id="objtext">
  not orange 
  <span style="color:orange"> 
    orange 
  </span>
  not orange 
</textarea>

它只是将其中包含的文本区域显示为文本，而不是在文本区域内进行格式化。

我如何使它格式化（并且可以通过带有 textarea.value 的代码进行编辑和读取，理想情况下没有格式化）？

【问题讨论】：

没有......
developer.mozilla.org/en-US/docs/Web/Guide/HTML/…
请看：developer.mozilla.org/en-US/docs/Web/CSS/gradient/…
我可以在左侧添加一些 div，其中包含与 textarea 对应的行号吗？

标签： javascript html css formatting textarea

【解决方案1】：

我认为textarea 不可能做到这一点。我认为 epascarello 试图告诉您可以使用 div 和属性 contenteditable="true"。

看看这个类似的问题 - Is it possible to have several different textcolors in one textarea?

您需要设置 div 的样式，使其看起来和感觉像一个文本区域。这是一个基本模型，您可能需要添加一些 Javascript 来扩展它。

<div id="objtext" contenteditable="true">
  not orange 
  <span class="orange-text"> 
    orange 
  </span>
  not orange 
</div>

#objtext {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  overflow: auto;
  padding: 4px;
  width: 400px;
  height: 200px;
  font: medium -moz-fixed;
  font: -webkit-small-control;
}

.orange-text {
  color: orange;
}

::selection {
    color:orange;
}

::-moz-selection {
    color:orange;
}

https://jsfiddle.net/miainchambers/g07rcb5o/2/

可以使用document.getElementById("objtext").textContent检索文本值

【讨论】：

【解决方案2】：

不幸的是，使用 textarea 或 input 标签是不可能做到这一点的。

你可以改用：

contenteditable 属性

<div contenteditable="true">
  Lorem Ipsum <span style="color: red;">Lorem</span>
</div>

所见即所得的编辑器，如https://github.com/tinymce/tinymce
类似的工具取决于您必须提供的复杂性

【讨论】：

【解决方案3】：

查看Highlight.js + 一个可编辑的 div。

例子：

<link rel="stylesheet" href="/path/to/styles/default.css">
<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('code').forEach((el) => {
    hljs.highlightElement(el);
  });
});
</script>

<pre><code class="hightlight-json" contenteditable="True">{
  "menu": {
    "id": "file",
    "value": "File",
    "popup": {
      "menuitem": "None",
    }
  }
}
</code>
</pre>

【讨论】：