用芯片替换单词或在 VueJS (Quasar) 的文本区域内更改它们的样式
Replace words with chips or change their style within a textarea in VueJS (Quasar)
我正在尝试实现一个接受文本输入的文本区域组件。我希望能够用 chips 替换一些预定义的关键字以突出显示它们。
我正在使用 Quasar Framework's q-input 组件，但我找不到任何方法来控制内容的样式。我愿意接受一个解决方案，其中包括为关键字着色而不是用筹码替换它们，但我也无法实现这种行为。
textarea 元素只处理纯文本。
Quasar 有一个 WYSIWYG editor 允许粘贴标记。尝试看看是否可以弯曲它以满足您的需要。在玩它时我发现它的行为很古怪，我不确定 Vue 组件是否会为您提供所需的控制。
如果您想自己实现它，您将需要可怕的 contenteditable、execCommand 和 queryCommandState，我不鼓励您这样做，因为这是一种痛苦的经历。
就个人而言，我会回退到当用户输入时出现在文本区域上方或下方的纸条列表。
如果您使用等宽字体*，您可以计算匹配的单词的位置和长度，以便在位于下方的 canvas 中填充一些彩色形状。你不能太花哨，但实施起来很便宜。
请注意，处理 textarea 并不像处理 contenteditable 那样糟糕，因此您可以将匹配的单词替换为空格，以便看到 canvas -通过孔生成芯片，但您必须跟踪文本区域内容的状态。
*虽然不需要使用等宽字体，但使用任何其他字体都需要实际测量文本的长度和替换匹配项的空格的长度，并且它会开始得到一个有点复杂。
我正在尝试实现一个接受文本输入的文本区域组件。我希望能够用 chips 替换一些预定义的关键字以突出显示它们。
我正在使用 Quasar Framework's q-input 组件，但我找不到任何方法来控制内容的样式。我愿意接受一个解决方案，其中包括为关键字着色而不是用筹码替换它们，但我也无法实现这种行为。
textarea 元素只处理纯文本。
Quasar 有一个 WYSIWYG editor 允许粘贴标记。尝试看看是否可以弯曲它以满足您的需要。在玩它时我发现它的行为很古怪，我不确定 Vue 组件是否会为您提供所需的控制。
如果您想自己实现它，您将需要可怕的 contenteditable、execCommand 和 queryCommandState，我不鼓励您这样做，因为这是一种痛苦的经历。
就个人而言，我会回退到当用户输入时出现在文本区域上方或下方的纸条列表。
如果您使用等宽字体*，您可以计算匹配的单词的位置和长度，以便在位于下方的 canvas 中填充一些彩色形状。你不能太花哨，但实施起来很便宜。
请注意，处理 textarea 并不像处理 contenteditable 那样糟糕，因此您可以将匹配的单词替换为空格，以便看到 canvas -通过孔生成芯片，但您必须跟踪文本区域内容的状态。
*虽然不需要使用等宽字体，但使用任何其他字体都需要实际测量文本的长度和替换匹配项的空格的长度，并且它会开始得到一个有点复杂。