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

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

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

阅读 7.9k
3 个回答

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

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

要实现此需求,需使用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。

新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题