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

Question

我有一个 HTML Textarea，其中包含一个定制的实时可编辑 JSON 文件，您可以在其中实时查看编辑结果。我还有一些东西可以循环通过“点”属性中的条目，作为一个列表，它在 canvas 中显示结果，其中可以看到 JSON 结果，这样人们就可以看到什么正在选择点。

我希望textarea中的点在被选中时能够被格式化，比如textarea中被选中的点JSON被高亮显示为黄色或者文本颜色变为蓝色或类似的东西.

我试过这个：

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

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

如何格式化它（并且可以使用 textarea.value 代码编辑和读取，最好不格式化）？

Answer 1

我认为 textarea 不可能做到这一点。我认为 epascarello 是想告诉你可以使用具有属性 contenteditable="true".

的 div

看看这个类似的问题 - 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

检索文本值

Answer 2

很遗憾，无法使用文本区域或输入标签执行此操作。

您可以改用：

contenteditable 属性

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

像https://github.com/tinymce/tinymce
这样的所见即所得编辑器
类似的工具取决于您必须提供的复杂程度

Answer 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>

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

Is there a way to have different colored text inside a textarea?

html

javascript

css

formatting

textarea