0.4.5 • Published 7 years ago
uxcore-mention v0.4.5
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 |
0.4.5
7 years ago
0.4.4
7 years ago
0.4.3
7 years ago
0.5.0
7 years ago
0.4.2
7 years ago
0.4.1
7 years ago
0.4.0
7 years ago
0.3.18
7 years ago
0.3.17
8 years ago
0.3.15
8 years ago
0.3.14
8 years ago
0.3.13
8 years ago
0.3.12
8 years ago
0.3.11
8 years ago
0.3.10
9 years ago
0.3.9
9 years ago
0.3.8
9 years ago
0.3.7
9 years ago
0.3.6
9 years ago
0.3.5
9 years ago
0.3.4
9 years ago
0.3.3
9 years ago
0.3.2
9 years ago
0.3.1
9 years ago
0.3.0
9 years ago
0.2.0
9 years ago
0.1.10
9 years ago
0.1.9
9 years ago
0.1.8
9 years ago
0.1.7
10 years ago
0.1.6
10 years ago
0.1.5
10 years ago
0.1.4
10 years ago
0.1.3
10 years ago
0.1.2
10 years ago
0.1.1
10 years ago