tinymce-mention-internal-fork v0.0.3
tinyMCE mention
Mentions plugin for tinyMCE WYSIWYG editor, modified for internal use with some fixes and modifications".
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
Added Fix
Added ability to move selected option in dropdown down controls via keyboard keys and keeping it in focus.
Usage
Install using bower.
bower install tinymce-mention-internal-fork
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
source: function (query, process, delimiter) {
// Do your ajax call
// When using multiple delimiters you can alter the query depending on the delimiter used
if (delimiter === '@') {
$.getJSON('ajax/users.json', function (data) {
//call process to show the result
process(data)
});
}
}
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.
matcher: function(item) {
//only match Peter Griffin
if(item[this.options.queryBy] === 'Peter Griffin') {
return true;
}
}
highlighter
Highlights the part of the query in the matched result.
highlighter: function(text) {
//make matched block italic
return text.replace(new RegExp('(' + this.query + ')', 'ig'), function ($1, match) {
return '<i>' + match + '</i>';
});
}
insertFrom
Key used in the default insert
implementation.
Default: queryBy
value
NOTE: key can be any property defined in
source
option.
insert
Callback to set the content you want to insert in tinyMCE.
insert: function(item) {
return '<span>' + item.name + '</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.
render: function(item) {
return '<li>' +
'<a href="javascript:;"><span>' + item.name + '</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.
renderDropdown: function() {
//add twitter bootstrap dropdown-menu class
return '<ul class="rte-autocomplete dropdown-menu"></ul>';
}
License
MIT licensed
Copyright (C) 2013 Cognistreamer, http://cognistreamer.com