https://github.com/team-loxo/summernote-at-mention

@mention plugin for summernote with support for autocomplete.
https://github.com/team-loxo/summernote-at-mention

mention plugin summernote

Last synced: 3 months ago
JSON representation

@mention plugin for summernote with support for autocomplete.

• Host: GitHub
• URL: https://github.com/team-loxo/summernote-at-mention
• Owner: team-loxo
• License: mit
• Created: 2018-01-23T15:32:29.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T13:24:51.000Z (over 1 year ago)
• Last Synced: 2024-02-14T06:36:05.581Z (9 months ago)
• Topics: mention, plugin, summernote
• Language: JavaScript
• Homepage:
• Size: 236 KB
• Stars: 4
• Watchers: 4
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-summernote - summernote-at-mention

README

        
# Summernote @mention plugin

## Usage

1. Include the `bundle.js` file in your javascript.

2. In the `callbacks` option passed to Summernote, include the configuration object.

## Configuration Object

The configuration object that should be passed into the `callbacks` option to Summernote has the following structure:

```javascript

{

  getSuggestions: (value) => ['Array of strings'],

  onSelect: (value) => {},

}

```

This object should be passed via the `summernoteAtMention` key within the `callbacks` option passed to Summernote.

The first function `getSuggestions` takes in a string via the `value` argument and should return a list of strings that will be presented as options to the user.

The second function `onSelect` gets called once a user selects an option using the `ENTER` key. It is passed the selected value via the `value` argument. If no such function is provided, the default behavior is to fill in the the text after the `@` sign with the selected option.

## Example

```javascript

$('#summernote').summernote({

  placeholder: 'Placeholder',

  toolbar: [['style', ['style']]],

  callbacks: {

    summernoteAtMention: {

      getSuggestions: = (value) => {

        const userEmails = ['[email protected]', '[email protected]'];

        return userEmails.filter((email) => {

          return sample.includes(value) && sample !== value

        });

      },

    },

  },

})

```

## Contributing

All ideas and contributions are welcome! Please use the `Issues` tab.