# tinymce.atwho

**Repository Path**: isszz/tinymce.atwho

## Basic Information

- **Project Name**: tinymce.atwho
- **Description**: 用来@提到某某用户的插件, 编辑器实现插入好友, 需要后端提供一个可选用户列表数据, 后端需要自己实现哦~
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 1
- **Created**: 2021-04-10
- **Last Updated**: 2025-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 用来@提到某某用户的插件, 编辑器实现插入好友, 需要后端提供一个可选用户列表数据, 后端需要自己实现哦~

## 更新说明

-   修复替换艾特用户时的多次回调
-   修复插入用户列表弹窗出错的bug
-   增加艾特用户上限
-   增加在输入字符串找后端不提供数据时，输入`.`时恢复@符，因为在输入邮箱时必然会输入`.`防止影响输入邮箱
-   新增静态数据OR缓存数据的关键词查找
-   优化获取已艾特用户方式

## 配置

| 配置名 | 默认状态 | 配置说明 |
| --- | --- | --- |
| cfyun_atwho | false | 插件开关 |
| atwho_at | @ | 艾特用户定界符 |
| atwho\_max\_num | 10 | 超过设置数量，不再生成@ |
| atwho\_query\_all | false | 在不输入的情况查询好友列表 |
| atwho\_max\_name | 16 | 名字最大长度，大于这个设置则截取，后面输入不做查询 |
| atwho\_query\_delay | 200 | 查询延时时间，在输入时防止一直向后端查询数据 |
| atwho\_query\_callback | null |  查询后端获取好友，后端需要实现根据输入的字符串模糊查找用户好友 |
| atwho\_data\_callback | null | 艾特用户回调，提供给后端用于后端发送通知等操作，不设置此项时可以使用监听`atwho`事件的方式获取回调 |

## 给后端提供数据的回调示例

接口请务必支持模糊查找

```
atwho_query_callback: function(name, callback) {
    $.get('/api/user/friends', {name: name}).then((res) => {
        if(res.errno === 0) {
            return callback(res.data);
        }
        return callback([]);
    });
},
```

### 后端给插件提供的数据结构

```
[
    {uid: userid, name: 'username', url: '/user/1'},
    {uid: userid2, name: 'username2', url: '/user/2'}
]
```

## 插件回调获取已艾特的用户列表示例

设置此项后，监听`atwho`事件方式获取无效

```
atwho_data_callback: function(data) {
    if(!data || !data.length) {
        return !1;
    }
    // data艾特用户列表
    // 返回的是数组, 可以将这个数组写入到页面, 和表单提交给后端, 用来发送被提到的通知
},
```

### 插件返回的数据结构

```
[
    {uid: userid, name: 'username', url: '/user/1'},
    {uid: userid2, name: 'username2', url: '/user/2'}
]
```

## 事件监听方式获取回调已艾特的用户列表

此方式获取艾特用户数据的前提是，未配置获取回调的方法`atwho_data_callback`

```
init_instance_callback : function(editor) {
    editor.on('atwho', function(e, data) {
        // 艾特用户列表
        console.log(e.list);
    });
}
```

## 安装说明

将下面代码保存至tinymce/plugins/atwho/plugin.(min.)js

然后在编辑器配置的plugins项新增atwho

其他配置请看参数说明

请前往gitee查看代码: [https://gitee.com/isszz/tinymce.atwho](https://gitee.com/isszz/tinymce.atwho)