0.4.5 • Published 7 years ago

uxcore-mention v0.4.5

Weekly downloads
17
License
MIT
Repository
github
Last release
7 years ago

uxcore-mention

React mention. Mention anywhere.

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

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

nameDescriptionTypeDefault
prefixClsclass prefixstringkuma-mention
sourcedata source for mention contentarray or function[]
delaydebounce of the request to data sourcenumber100
matchRangeonly match the string after delimiter which the length in this rangearray2, 8
formatterformat the data form sourcefunction
panelFormattercustomize the panel displayfunction
onChangetrigger when editor content changefunction(e, value)

TinymceMention

nameDescriptionTypeDefault
prefixClsclass prefixstringkuma-mention
sourcedata source for mention contentarray or function[]
delaydebounce of the request to data sourcenumber100
matchRangeonly match the string after delimiter which the length in this rangearray2, 8
formatterformat the data form sourcefunction
panelFormattercustomize the panel displayfunction
mentionFormattercustomize the insert content with this functionfunction
onChangetrigger when editor content changefunction(e, value)
onAddCallback invoked when a mention has been addedfunction(display, originData)
insertModeELEMENT_NODE will insert mention content with a button, TEXT_NODE will insert with a text nodestringELEMENT_NODE or TEXT_NODE

ContentEditableEditor

nameDescriptionTypeDefault
prefixClsclass prefixstringkuma-mention
widtheditor's widthnumber200
heighteditor's heightnumber100
placeholderplaceholderstring''
mentionFormattercustomize the insert content with this functionfunction
onChangeCallback invoked when the editor's content has been changedfunction(e, value)
onAddCallback invoked when a mention has been addedfunction(display, originData)
defaultValuedefault valuesstring
readOnlycan not editboolean
delimiterDefines the char sequence upon which to trigger querying the data sourcestring'@'
maxLengthDefine the char input limiationnumber

TextareaEditor

nameDescriptionTypeDefault
prefixClsclass prefixstringkuma-mention
widtheditor's widthnumber200
heighteditor's heightnumber100
placeholderplaceholderstring''
mentionFormattercustomize the insert content with this functionfunction
onChangeCallback invoked when the editor's content has been changedfunction(e, value)
onAddCallback invoked when a mention has been addedfunction(display, originData)
defaultValuedefault valuesstring
readOnlycan not editboolean
delimiterDefines the char sequence upon which to trigger querying the data sourcestring'@'
maxLengthDefine the char input limiationnumber

InputEditor

nameDescriptionTypeDefault
prefixClsclass prefixstringkuma-mention
widtheditor's widthnumber200
heighteditor's heightnumber30
placeholderplaceholderstring''
mentionFormattercustomize the insert content with this functionfunction
onChangeCallback invoked when the editor's content has been changedfunction(e, value)
onAddCallback invoked when a mention has been addedfunction(display, originData)
defaultValuedefault valuesstring
readOnlycan not editboolean
delimiterDefines the char sequence upon which to trigger querying the data sourcestring'@'
maxLengthDefine the char input limiationnumber
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