tinyMCE mention
Mentions plugin for tinyMCE WYSIWYG editor.
Browser compatibility
- IE7+
- Chrome
- Safari
- Firefox
- Opera
Dependencies
NOTE: Use v3.x if you're using tinyMCE v3.5.x, use v4.x if you're using tinyMCE v4.x
Usage
Install using bower.
bower install tinymce-mention
Or copy the source of the plugin to the plugins directory of your tinyMCE installation. Add the mention plugin to your tinyMCE configuration.
plugins : "advlink, paste, mention"
Add configuration options for the mention plugin. source
is the only required setting.
NOTE:
source
can also be a function. see the options section below.
mentions: source: name: 'Tyra Porcelli' name: 'Brigid Reddish' name: 'Ashely Buckler' name: 'Teddy Whelan'
Configuration
source (required)
The source parameter can be configured as an array or a function.
array
source: name: 'Tyra Porcelli' name: 'Brigid Reddish' name: 'Ashely Buckler' name: 'Teddy Whelan'
function
{ // Do your ajax call // When using multiple delimiters you can alter the query depending on the delimiter used if delimiter === '@' $; }
queryBy
The name of the property used to do the lookup in the source
.
Default: 'name'
.
delimiter
Character that will trigger the mention plugin. Can be configured as a character or an array of characters.
character
delimiter: '@'
array
delimiter: '@' '#'
Default: '@'
.
delay
Delay of the lookup in milliseconds when typing a new character.
Default: 500
.
items
Maximum number of items displayed in the dropdown.
Default: 10
matcher
Checks for a match in the source collection.
{ //only match Peter Griffin ifitemthisoptionsqueryBy === 'Peter Griffin' return true; }
highlighter
Highlights the part of the query in the matched result.
{ //make matched block italic return text;}
insert
Callback to set the content you want to insert in tinyMCE.
{ return '<span>' + itemname + '</span>';}
NOTE: item parameter has all properties defined in the
source
option.
render
Callback to set the HTML of an item in the autocomplete dropdown.
{ return '<li>' + '<a href="javascript:;"><span>' + itemname + '</span></a>' + '</li>';}
NOTE: item parameter has all properties defined in the
source
option.
renderDropdown
Callback to set the wrapper HTML for the autocomplete dropdown.
{ //add twitter bootstrap dropdown-menu class return '<ul class="rte-autocomplete dropdown-menu"></ul>';}
License
MIT licensed
Copyright (C) 2013 Cognistreamer, http://cognistreamer.com