以角度实现突出显示的文本区域

Question

我可以用这个https://mattlewis92.github.io/angular-text-input-highlight/ 突出显示文本。你能帮我改变文字颜色而不是文字背景颜色吗？ 我的想法是将生成的跨度放在文本区域的顶部。但它不会使文本区域不可点击（点击突出显示的部分时）？

Answer 1

您可以做一些事情，所有这些都涉及 CSS（因此您需要一个自定义 CSS 文件）。

如果你想使用相同的颜色，你可以添加这条规则：

.text-input-highlight-container .text-highlight-tag {
    color: some_color;
}

如果你想要一个固定的颜色和不同的背景颜色：

.bg-blue {
    color: some_color;
}

.bg-pink {
    color: some_other_color;
}

如果您希望能够为每种背景颜色设置不同的颜色：

.text-blue {
    color: blue
}

.text-red {
    color: red;
}

然后您更改代码以添加这些文本颜色类：

tags: HighlightTag[] = [{
  indices: { start: 8, end: 12 },
  cssClass: 'bg-blue text-red',
  data: { user: { id: 1 } }
}];

这仅适用于几种颜色，因为它似乎叠加在原始黑色文本上。

因此，为了使此功能适用于各种颜色，您需要使常规文本透明：

.text-input-highlight-container textarea {
    color: transparent;
}

在您的代码中，您将突出显示应用于所有文本，但不要为常规文本添加任何类，例如

tags: HighlightTag[] = [{
  indices: { start: 0, end: 11 },
  cssClass: '',
  data: { user: { id: 1 } }
},
{
  indices: { start: 8, end: 12 },
  cssClass: 'bg-blue text-red',
  data: { user: { id: 1 } }
}];

第一部分看起来像普通文本，后者将有蓝色背景和红色文本。

希望这是有道理的。

更新：

请务必将非高亮文本的索引也添加到 HighlightTag 数组中，如下所示：https://stackblitz.com/edit/angular-ivy-my8her?file=src%2Fapp%2Fapp.component.ts（不过，css 不适用于 Stackblitz），以便将其包裹在一个跨度中好吧。

如果您已将颜色设置为透明，则需要为跨度内的文本提供默认颜色。

.text-input-highlight-container .text-highlight-tag {
    color: black; //or any other color you want for the non-highlighted text
}

那你就可以了

.bg-blue { color: lightblue !important; } //background-color for bg-blue is lightblue so I wouldn't set text color to lightblue though

.bg-blue 的颜色设置为白色，它看起来像这样：

更新 2：

我对 HTML 进行了更深入的研究，如果您不想的话，您不必将未突出显示的文本包装在 span 中。 这应该可以解决问题：

.text-input-highlight-container .text-input-element { //the textarea
    color: transparent;
}
.text-input-highlight-container .text-highlight-element { //the superimposed text
    color: black;
    border-color: transparent; //otherwise you'll get a black border
}
.bg-blue {
    color: white;
}

应用于演示页面：