Angular中带有关键字标签的文本区域

Posted 2023-05-07

【中文标题】Angular中带有关键字标签的文本区域

【英文标题】：Textarea with keyword tags in Angular

【发布时间】：2020-02-28 16:45:00

【问题描述】：

是否有可能有一个textarea 允许纯文本，但将某些关键字转换为“芯片”（或其他样式的等效项）？理想情况下，我可以使用 Angular Material 来做到这一点，但我也愿意使用另一个与 Angular 兼容的库。我做了很多搜索，但找不到我要找的东西。

这里的“带有输入的芯片”和“带有自动完成功能的芯片”示例与我想要的类似，但似乎不允许纯文本： https://material.angular.io/components/chips/examples

【问题讨论】：

看看contenteditable。

【参考方案1】：

您可以通过一些解决方法来做到这一点：

你会显示一个<div [innerhtml]="formatedCode">，里面有格式化的文本

当您点击它时，您会改为显示<text-area [value]="formatedCode">，以便用户可以修改内容。

当用户完成后，您将内容映射到您想要的格式化代码。并显示<div>