富文本编辑器着色

Question

我正在构建一个跨浏览器的富文本编辑器。在那我有一个场景，比如一些文本将被插入一个颜色 例如：

你好 {$1} --> 在内部这个 {$1} 将是 $1

将光标放在 {$1} 的末尾时，如果我开始输入，则字符会在该范围内输入。

任何人都可以建议将焦点设置在该范围之外的选项，这样我就不会将键入的文本的颜色变为红色？

Answer 1

这是默认的网络浏览器行为，因此很难覆盖它。

您可以通过 CANVAS 重新定义整个内容（包括光标、选择、键入、插入等），而不是使用默认的编辑器模式。但这是非常复杂的方式。

所以尝试在 span 之后插入 1 个空格：

<span style="color:red">$1</span> <!-- see the 1 space after the span -->

当用户将光标放在 span 之后，文本不会是红色的。