一款支持插入表情的编辑器实现代码(简单思路挺重要)

下面是一个表情列表,为了简单我直接在li里面放图片的文件名称，而class 属性用来存放对应的标记

接下来把上面的 li 变成 img

放一个 iframe 用来做编辑器

先得到 ifame


.designmode="on"; 这个方法还是蛮常见的。 刚开始做的时候还想用 textarea 但是textarea不能显示图片。这里在实际过程中发现与 textarea 的一个差异，iframe 内不会自己换行，所以为iframe 添加了一个body设置了一个word-wrap属性

下面实现，在iframe 插入图片表情的过程(代码内有注释)

到这里，就完成了插入表情的过程。还有最后一件事情：翻译img 标记

其实还有很多问题没有处理，俺也只是一知半解。把代码贴出来希望能帮助一些朋友解决问题。