uxcore-mention
Version:
Mention anywhere with this component
241 lines (187 loc) • 8.67 kB
Markdown
# uxcore-mention
React mention.
Mention anywhere.
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test Coverage][coveralls-image]][coveralls-url]
[![Dependency Status][dep-image]][dep-url]
[![devDependency Status][devdep-image]][devdep-url]
[![NPM downloads][downloads-image]][npm-url]
[![Sauce Test Status][sauce-image]][sauce-url]
[npm-image]: http://img.shields.io/npm/v/uxcore-mention.svg?style=flat-square
[npm-url]: http://npmjs.org/package/uxcore-mention
[travis-image]: https://img.shields.io/travis/uxcore/uxcore-mention.svg?style=flat-square
[travis-url]: https://travis-ci.org/uxcore/uxcore-mention
[coveralls-image]: https://img.shields.io/coveralls/uxcore/uxcore-mention.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/uxcore/uxcore-mention?branch=master
[dep-image]: http://img.shields.io/david/uxcore/uxcore-mention.svg?style=flat-square
[dep-url]: https://david-dm.org/uxcore/uxcore-mention
[devdep-image]: http://img.shields.io/david/dev/uxcore/uxcore-mention.svg?style=flat-square
[devdep-url]: https://david-dm.org/uxcore/uxcore-mention#info=devDependencies
[downloads-image]: https://img.shields.io/npm/dm/uxcore-mention.svg
[sauce-image]: https://saucelabs.com/browser-matrix/uxcore-mention.svg
[sauce-url]: https://saucelabs.com/u/uxcore-mention
### Development
```sh
git clone https://github.com/uxcore/uxcore-mention
cd uxcore-mention
npm install
npm run server
```
if you'd like to save your install time，you can use uxcore-tools globally.
```sh
npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-mention
cd uxcore-mention
npm install
npm run dep
npm run start
```
### Test Case
```sh
npm run test
```
### Coverage
```sh
npm run coverage
```
## Demo
http://uxcore.github.io/components/mention
> If you are running this demo in some old browsers that do not support `getSelection()`, you may need to include [rangy](https://www.npmjs.com/package/rangy) in your page.
#### work width all kinds of editor
```js
import ReactDOM from 'react-dom';
import Tinymce from 'uxcore-tinymce';
import Mention, { ContenteditableEditor, TextareaEditor, InputEditor } from 'uxcore-mention';
ReactDOM.render(
<div>
<Mention
source={source}
formatter={formatter}>
<ContenteditableEditor
width={250}
height={150}
placeholder="contenteditable editor placeholder" />
<TextareaEditor
width={250}
height={100}
placeholder="textarea editor placeholder" />
<InputEditor
placeholder="input editor placeholder" />
</Mention>
</div>
,targetNode);
```
#### work with tinymce
```js
import ReactDOM from 'react-dom';
import Tinymce from 'uxcore-tinymce';
import Mention, { TinymceMention } from 'uxcore-mention';
ReactDOM.render(
<div>
<TinymceMention
insertMode={'TEXT_NODE'}
source={getData}
formatter={dataFormatter}
mentionFormatter={mentionFormatter}
panelFormatter={panelFormatter}>
<Tinymce
placeholder={'tinymce placeholder'} />
</TinymceMention>
</div>
,targetNode);
```
## Contribute
Yes please! See the [CONTRIBUTING](https://github.com/uxcore/uxcore/blob/master/CONTRIBUTING.md) for details.
### API
#### Mention
* formatter(arr): format the data form source.
* panelFormatter(obj): customize the panel display.
* onChange(e, value): onChange事件。
#### TinymceMention
* formatter(arr): format the data form source.
* panelFormatter(obj): customize the panel display.
* mentionFormatter(obj): customize the insert content with this function.
* onChange(e, value): Callback invoked when the editor's content has been changed.
* onAdd(display, originData): Callback invoked when a mention has been added.
#### ContentEditableEditor
* mentionFormatter(obj): customize the insert content with this function.
* onChange(e, value): Callback invoked when the editor's content has been changed.
* onAdd(display, originData): Callback invoked when a mention has been added.
* getMentions(): get all current mentions(will automatically remove duplicate items).
#### TextareaEditor
* mentionFormatter(obj): customize the insert content with this function.
* onChange(e, value): Callback invoked when the editor's content has been changed.
* onAdd(display, originData): Callback invoked when a mention has been added.
* getMentions(): get all current mentions(will automatically remove duplicate items).
#### InputEditor
* mentionFormatter(obj): customize the insert content with this function.
* onChange(e, value): Callback invoked when the editor's content has been changed.
* onAdd(display, originData): Callback invoked when a mention has been added.
* getMentions(): get all current mentions(will automatically remove duplicate items).
### props
#### Mention
|name|Description|Type|Default|
|---|----|---|------|
| prefixCls | class prefix | string | kuma-mention |
| source | data source for mention content | array or function | [] |
| delay | debounce of the request to data source | number | 100 |
| matchRange | only match the string after delimiter which the length in this range | array | [2, 8] |
| formatter | format the data form source | function | |
| panelFormatter | customize the panel display | function | |
| onChange | trigger when editor content change | function(e, value) | |
#### TinymceMention
|name|Description|Type|Default|
|---|----|---|------|
| prefixCls | class prefix | string | kuma-mention |
| source | data source for mention content | array or function | [] |
| delay | debounce of the request to data source | number | 100 |
| matchRange | only match the string after delimiter which the length in this range | array | [2, 8] |
| formatter | format the data form source | function | |
| panelFormatter | customize the panel display | function | |
| mentionFormatter | customize the insert content with this function | function | |
| onChange | trigger when editor content change | function(e, value) | |
| onAdd | Callback invoked when a mention has been added | function(display, originData) | |
| insertMode | `ELEMENT_NODE` will insert mention content with a button, `TEXT_NODE` will insert with a text node | string | `ELEMENT_NODE` or `TEXT_NODE` |
#### ContentEditableEditor
|name|Description|Type|Default|
|---|----|---|------|
| prefixCls | class prefix | string | kuma-mention |
| width | editor's width | number | 200 |
| height | editor's height | number | 100 |
| placeholder | placeholder | string | '' |
| mentionFormatter | customize the insert content with this function | function | |
| onChange | Callback invoked when the editor's content has been changed | function(e, value) | |
| onAdd | Callback invoked when a mention has been added | function(display, originData) | |
| defaultValue | default values | string | |
| readOnly | can not edit | boolean | |
| delimiter | Defines the char sequence upon which to trigger querying the data source | string | '@' |
| maxLength | Define the char input limiation | number | |
#### TextareaEditor
|name|Description|Type|Default|
|---|----|---|------|
| prefixCls | class prefix | string | kuma-mention |
| width | editor's width | number | 200 |
| height | editor's height | number | 100 |
| placeholder | placeholder | string | '' |
| mentionFormatter | customize the insert content with this function | function | |
| onChange | Callback invoked when the editor's content has been changed | function(e, value) | |
| onAdd | Callback invoked when a mention has been added | function(display, originData) | |
| defaultValue | default values | string | |
| readOnly | can not edit | boolean | |
| delimiter | Defines the char sequence upon which to trigger querying the data source | string | '@' |
| maxLength | Define the char input limiation | number | |
#### InputEditor
|name|Description|Type|Default|
|---|----|---|------|
| prefixCls | class prefix | string | kuma-mention |
| width | editor's width | number | 200 |
| height | editor's height | number | 30 |
| placeholder | placeholder | string | '' |
| mentionFormatter | customize the insert content with this function | function | |
| onChange | Callback invoked when the editor's content has been changed | function(e, value) | |
| onAdd | Callback invoked when a mention has been added | function(display, originData) | |
| defaultValue | default values | string | |
| readOnly | can not edit | boolean | |
| delimiter | Defines the char sequence upon which to trigger querying the data source | string | '@' |
| maxLength | Define the char input limiation | number | |