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

Question

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

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

Answer 1

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...

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

Answer 2

添加表情肯定不需要iframe,播入一个元素，添加个背景就行了。

但twitter中，我看到span中的属性中有引入一个图片的地址，但没有看到相应的css中有添加样式，这我就不知道它是怎样显示这个图片的了。
求解！