关于wang-editor轻量级富文本编辑器与vue-at的结合使用 连载中~~~

富文本编辑器和@功能

因为项目中需要在富文本编辑器中实现@好友功能。一开始，老大准备了tinymce编辑器，我准备自己手写一个@功能。

问题

当我把成员列表，事件都写好之后，出现了很多问题或者说这些问题都是同一个问题，那就是获取标点
我发现我并不能通过传统的方法去设置焦点比如

1. document.getElementById(‘’).focus去设置它的焦点
2. ，或者给div设置tabindex，因为我的场景不同，@好友应该是当keyup事件触发之后出现成员列表div后，自动获取焦点，并不是要再次点击获取焦点。

所以，一直在查阅文档，并没有找到相应的方法，很是无奈。

转折

求助于同事，同事指出我的方向错误，并不应该去自己埋头造一个轮子，应该去网上看看有没有别人写好的插件，拿过来用。然后找到一个可以@好友的插件名字叫At，vue,react都可以使用。当时觉得困扰了这么久的需求终于要解决了，很是开心🥳。

关于At@插件使用需求

我按照官网的步骤，npm i把它安装下来，然后阅读了一下文档，嗯～很不错嘛……
这个插件的用法，是将你需要用到@方法的div也好，textarea……等等之类的包裹住。没错，是这个插件包裹住需要用到的元素，并不是把它放入元素体内。
这个插件有两种模式，一种是包裹的容器是不可编辑的比如上面讲的div、span或者其他（在下面我统称为单一模式），另一种是可编辑的比如input、textarea之类的（在下面我统称为多样模式）。
看到这里觉得这个插件挺人性化的

经历，与AT@组件详细介绍

当我看清楚这个插件的基本用法之后，我开始自己写demo ，用例子来熟悉