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
10 years ago
0.1.8
10 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