如题,类似于稿定在线ps图层多选拖拽排序组件是如何实现的?我看了这个网站是vue框架,我们公司也同样用vue,大佬们有推荐的多选拖拽组件吗?或者有好的实现方案推荐吗?https://ps.gaodin
顺晟科技
2021-07-09 11:25:58
218
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。
16
2022-09
16
2022-09
15
2022-09
15
2022-09
15
2022-09
15
2022-09