如何实现话题功能？

在日常开发中我们偶尔遇到类似于#某某某某#这种东西，就把它当作话题功能吧。
要实现一个话题功能，我们分析它有哪些需要实现：

1. 实现输入
   这里我们可以想到使用textarea，但textarea无法支持富文本。因此排除！顾使用div的contenteditable属性；如下：

   <div id="textarea" contenteditable><div/>

   这样此div就是一个可编辑div了，且内部可以使用富文本；如下：

   <div id="textarea" contenteditable>
    我是文本<span style="color:red;">#我是红色#</span>
   <div/>

   可以看到标签内的“#我是红色#”呈现红色状态。

2. 实现删除
   删除需要考虑#xxx#标签内部是一个整体，添加的时候是一个整体，删除时候也得是一个整体删除。因此我们需要给#xxx#用一个span标签包住。且contenteditable属性改成false。如下：

<div id="textarea" contenteditable>
    <span contenteditable="false" style="color:red;">#我是红色#</span> asdfsadfasdf<span contenteditable="false">#asdfdsafasdf#</span>
</div>

我们进行删除，可以发现功能好使，且删除时候可以实现删除整体#xxx#span标签。
但是：第一个#xxx#标签无法删除。此时，需要在前面添加一个空白字符让其能实现删除第一个#xxx#。因此这里我们使用&#8203此字符来做一个1字节得占位，这样就可以实现第一个删除了。

整体代码为：

<div id="textarea" contenteditable>
    &#8203<span contenteditable="false">#asdfdsafasdf#</span> asdfsadfasdf<span contenteditable="false">#asdfdsafasdf#</span>
</div>

3. 实现提示
   提示功能实现需要监听input事件，当发现输入的字符为“#”号时候，在光标处弹出一个下拉框，点选下拉框，给光标处插入一个<span contenteditable="false" style="color:red;">#xxx#</span>即可。

效果图如下：