问答

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

作者:admin 2021-04-17 我要评论

js如何实现类似发布微博的@用户和#话题功能 需求:@用户和#话题颜色为蓝色,其他内容文字为黑色 一开始想用textarea 但是需要颜色不一样实现不了,后来又试着用w...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

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

###

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

  • 如果节点不是你创建的,那么必须要有分隔符才能知道那块内容是你想要的(空格、#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。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器