我可以通过pre上的不可见文本区域实现富文本吗？

Question

我想在我的应用程序中实现语法突出显示功能。 请忽略内容可编辑的可能性。

我想通过以下方式实现此功能： 带有不可见字体和背景的textarea，浮动在pre上，并且将适当的颜色应用于文本。光标和选择背景应在文本区域中呈现，但突出显示的文本应从基础文本中显示出来。

现在，看来textarea（或我的CSS无知）有一些特殊之处，使它无法正确呈现（例如，使textarea的背景/颜色也使光标不可见）。

有没有办法实现我的目标？

我不需要一般帮助。随附的是我正在使用的编辑器的图像。突出显示和选择可见，光标不可见。 ：（。

Answer 1

您可以将CSS属性caret-color用于文本区域。这将为光标/插入符号专门设置颜色，而忽略文本区域的背景/文本颜色。不幸的是，这在IE / Edge中不起作用（但是其他主要浏览器均支持）。

Answer 2

我显然没有明白您的意思，而是将您引向了ace之类的代码编辑器。

我现在看到的是我刚刚创建的上面您所问的示例。您可以通过执行以下颜色来隐藏文本区域中的文本：rgba（0,0,0,0）;但这也会隐藏光标。

*{
  box-sizing: border-box;
}
div{
  position: relative;
}
pre{
  background: black;
  color: white;
  font-size: 14px;
}

textarea {
  font-size: 14px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  padding: 0;
  color: rgba(0,0,0,0);
}

<div>
  <pre>This is my pre
      -
      -
  </pre>

  <textarea>This is my pre</textarea>
</div>