# quill-mention-people

> a module for vue-quill-editor to mention people(@people)

Latest version **1.0.5** (published 2018-05-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install quill-mention-people
pnpm add quill-mention-people
yarn add quill-mention-people
bun add quill-mention-people
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2018-05-04 |
| First published | 2018-05-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | merryliao |
| Maintainers | merryliao |
| Keywords | quill, vue-quill, mention, @ |

## Links

- npm: https://www.npmjs.com/package/quill-mention-people
- Repository: https://github.com/merryliao/vue-quill-at
- Homepage: https://github.com/merryliao/vue-quill-at#readme
- Issues: https://github.com/merryliao/vue-quill-at/issues
- npm.io page: https://npm.io/package/quill-mention-people

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.5 (latest) — 2018-05-04
- 1.0.4 — 2018-05-04
- 1.0.3 — 2018-05-04
- 1.0.2 — 2018-05-04
- 1.0.1 — 2018-05-04
- 1.0.0 — 2018-05-04

## README

# quill-mention-people

## 描述

quill-etior的@人扩展

## 演示

![图片描述](http://bk.image.styleweb.com.cn/2018/5/4/_jgroimye.gif)

## 安装

```javascript:run
npm i quill-mention-people
```


## 使用

```javascript:run
import Quill from 'quill';
import atPeople from 'quill-mention-people';
Quill.register('modules/atPeople',atPeople);
//引入@成员列表的css
import 'quill-mention-people/index.css'
```



## 配置

```javascript:run
   editorOption:{
        modules:{
          atPeople:{
            //成员列表(必填)
            list:[
              {id:1,name:'lmr'}
              ],
            //选择某一个成员后执行的操作（可选参数）
            atOneMemberAction:fn(item)
          },
        }
      }
```

## example

```javascript:run
<template>
  <div class="hello">
    <quill-editor v-model="content"
                  ref="myQuillEditor"
                  :options="editorOption">
    </quill-editor>
  </div>
</template>

<script>
  export const container = [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{'header': 1}, {'header': 2}],
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'script': 'sub'}, {'script': 'super'}],
    [{'indent': '-1'}, {'indent': '+1'}],
    [{'direction': 'rtl'}],
    [{'size': ['small', false, 'large', 'huge']}],
    [{'header': [1, 2, 3, 4, 5, 6, false]}],
    [{'color': []}, {'background': []}],
    [{'font': []}],
    [{'align': []}],
    ['clean'],
    ['link', 'image', 'video']
  ];

  import Quill from 'quill';
  import atPeople from 'quill-mention-people';
  Quill.register('modules/atPeople',atPeople);
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      content:'',
      editorOption:{
        modules:{
          atPeople:{
            //成员列表
            list:[
              {id:1,name:'lmr'},
               {id:2,name:'merry'},
              {id:3,name:'box'},
              {id:4,name:'Carry'},
              {id:5,name:'Jony'},
              {id:6,name:'merry'},
              {id:7,name:'lala'},
              {id:8,name:'xiaoxiong'},
              {id:9,name:'herry'},
              {id:10,name:'jerry'},
              {id:11,name:'jackson'}
              ],
            //选择某一个成员执行的操作：
            atOneMemberAction:this.atOneMemberAction
          },
         toolbar:{
            container: container,
          }
        }
      }
    }
  },
  methods:{
    atOneMemberAction:function(item){
        console.log('selected member');
        console.log(item);
    }
  }
}
</script>

---
_Source: https://npm.io/package/quill-mention-people · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._