javascript - Twitter 发表内容的富文本框是什么原理制作的?

问题描述

问 题

twitter 的发表框支持插入表情,网络上的教程都是使用 iframe 来创建的,他的没有 iframe 他是什么原理实现的?

我希望用 jquery 实现,如果可以,感谢.

解决方案

div 设置 contenteditable 属性为 true 就可以直接编辑了
插入表情其实就是往 div 里动态插入了一个 img 标签 看一下新浪微博的就知道了

表情是 emoji ?
不过我也有楼上的疑惑 我发现我如果手动输入 emoji 它会转换成他们风格的表情图片
但是 span 元素本身没有设置背景 很好奇图片是怎么显示的 我一会去问一下群里的大佬

https://abs.twimg.com/emoji/v...

顺便附上新浪微博表情包：http://www.weibo.com/aj/mblog...

---

补充：我自己找到图片显示了 绝对定位 不在同一级 span 只是描述

顺便附上 emoji 图片转化（群里大佬提供）
https://github.com/linyows/jq...

实现思路就是最上面说的 只是它这个复杂一点

这篇关于javascript - Twitter 发表内容的富文本框是什么原理制作的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！