js如何实现类似发布微博的@用户和#话题功能
需求:@用户和#话题颜色为蓝色,其他内容文字为黑色
一开始想用textarea 但是需要颜色不一样实现不了,后来又试着用wangeditor富文本编辑器,可以实现插入颜色为蓝色的标签 但是插入标签后再输入文字,文字都在标签内了 ,颜色都是蓝色了,不知道如何实现了,有没有做过类似的
借鉴一下
js如何实现类似发布微博的@用户和#话题功能
需求:@用户和#话题颜色为蓝色,其他内容文字为黑色
一开始想用textarea 但是需要颜色不一样实现不了,后来又试着用wangeditor富文本编辑器,可以实现插入颜色为蓝色的标签 但是插入标签后再输入文字,文字都在标签内了 ,颜色都是蓝色了,不知道如何实现了,有没有做过类似的
借鉴一下
要实现此需求,需使用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。
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
你说的其实就是分隔符问题
#abcd#
、{{ abcd }}
、)。