README
uxcore-mention
React mention. Mention anywhere.
Development
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.
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
npm run test
Coverage
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 in your page.
work width all kinds of editor
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
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 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 |