vue如何实现类似发布微博的@用户和#话题功能

Question

js如何实现类似发布微博的@用户和#话题功能
需求：@用户和#话题颜色为蓝色，其他内容文字为黑色

一开始想用textarea 但是需要颜色不一样实现不了，后来又试着用wangeditor富文本编辑器，可以实现插入颜色为蓝色的标签 但是插入标签后再输入文字，文字都在标签内了 ，颜色都是蓝色了，不知道如何实现了，有没有做过类似的
借鉴一下

Answer 1

你说的其实就是分隔符问题

• 如果节点不是你创建的，那么必须要有分隔符才能知道那块内容是你想要的（空格、#abcd#、{{ abcd }}、）。
• 那么如果节点是你创建的呢？你需要在后面多增加一个节点，然后把光标扔进去。

Answer 2

要实现此需求，需使用html的 contenteditable属性，给div添加上contenteditable="true"，div就可以和textarea拥有同样的魔力。

<div id="textarea" contenteditable></div>

比textarea更强大的是，我们现在完全就可以面向dom编程了，用操作dom节点的方式操作文本输入框中的内容，比如我们可以往#textarea里插入节点 <a href="xxx">@用户</a> 和 <a href="xxx">#标签#</a>，这时编辑器内就会发现文本高亮了。
由于可以插入任何dom节点，此方法也需要注意提交数据的安全性，保存数据时，需过滤掉危险的标签，如<script></script> <form></form>。
有些偏题了，接着题主的问题继续，在实现了插入a标签，完成@用户高亮显示之后，还可以监听用户的输入，比如当用户输入了@符号，自动弹出下拉列表，给用户选择需要at的用户，这个有现成的插件，可以百度一下jquery.atwho.js。

Answer 3

话题功能可以分享下插入之后怎么删除吗