div+contenteditable 实现富文本发布框的小结

效果图和实现的功能

实现的效果图如下，主要实现的功能有

• 表情的插入
• 插入话题之后部分文字选中
• 文本框高度自适应
• 发送消息，获取发送框中的纯文本内容
• placeholder的实现
• 输入文字的计数面板

代码地址传送门 代码实现Vue

灵感来源

“你想做的一定有人做了，你一定不是第一个遇到这个问题的人”——这句话对80%（二八分布）的人是有效的，我也从中获益不少。

我的第一份参考案例是qq空间的说说发布框&&webqq的消息发送框，从中的收获有以下几点

• 可以使用div+contenteditable实现消息发送框
• 在Chrome中使用button标签来高亮被@的用户，在Firefox中使用img标签来高亮被@的用户（绝妙）这里不同标签的使用很讲究，考虑了浏览器兼容性。
• 插入话题之后部分文字选中，提高用户体验，这里还参考了张鑫旭老师的博客_新浪微博插入话题后部分文字选中的js实现
  第二份参考案例是掘金的动态发布框，收获如下
• 右下角显示还能够输入的字数
• placeholder的实现

实现的一些细节

contenteditable

我在拜读张鑫旭老师的文章翻译-你必须知道的28个HTML5特征、窍门和技术的时候第一次接触到可以通过div+contenteditable替代textarea实现一个编辑框。之后再阅读了