emoj-picker和tribute结合实现表情功能和@功能

由于要实现表情功能和@功能研究了二天，基本已经实现记录一下。

先看一下最终效果吧

功能需求：实现发布和回复框的@功能和表情插入功能

用到的工具：主要是前端的js，我用的vue和jq的结合，因为很多包的实现本身就依赖jq的。表情功能jq插件emoji_picker，地址emoji-picker，@功能用的tribute.js地址tribute，他还有一个基于jq的包叫At.js感兴趣可以自行研究一下。之所以用tribute是因为At.js已经不维护了。

使用中遇到的问题：最主要的是要把二个插件结合起来用到vue的实例里面。这个是在我用官方demo实验的时候遇到的最头疼的问题。在vue实例里面就想尽量的用vue的方式尽量少的去对dom直接操作。二个插件都是初始化的时候动态的插入dom里面的，也就是根本没有办法去绑定数据。

解决方案：我这边后端的是服务器渲染用的jinja2，然后前端数据处理渲染用vue和jq结合。我想到的方法是曲线救国的方式因为emoji_picker的初始化插入会依赖我们自己HTML里面的一个textarea，有这个基础就可以在这里做文章了，基本思路是在html模板里面对这个textarea用v-mode绑定一下我这里绑定的是commentContent，因为后面emoji-picker初始化插入的时候其实会隐藏我们这个textarea转而显示页面的是他插入的dom输入框和emoji工具图标，但是他会监听输入框的变化把输入框的内容原模原样的克隆一份到我们在模板里面创建的textarea里面，简单的说就是如果你取消textarea的display：none这个的时候回显示二个输入框，有图有真相

你在emoji-picker里面输入任何东西textarea里面也会有一样的的内容。这样就好办了，因为我们绑定了textarea，所以在vue里面直接就可以拿到这个内容了。然后继续入坑，你会发现tribute他必须要你的输入框有一个id属性。问题是我们实际前端显示的输入框不是textarea而是emoji-picker动态添加的输入框。所以我们要想用