I have a Froala element, which I am hoping to build a tagging element into using TributeJS.
I have a global version of the Froala element stored under instance.data.editor.
I am initialising tribute using the 'Froala Initialized' method as follows:
'initialized': function() {
if (instance.data.logging) console.log("<Event> initialized\n");
if (properties.tribute_on) {
// Initialize tribute.js with a list of users
tribute = new Tribute({
trigger: '@',
values: [
{ key: "Phil Heartman", value: "pheartman" },
{ key: "Gordon Ramsey", value: "gramsey" }
]
});
// Attach tribute to Froala element.
tribute.attach(instance.data.editor.el);
}
I then call the following code:
'keydown': function(event) {
if (instance.data.logging) console.log("<Event> keydown");
if (properties.tribute_on) {
if (event.which === 50 && event.shiftKey) { // 50 is the keycode for '@'
tribute.showMenuForCollection({
values: tribute.collection,
lookup: function (item) {
return item.key.indexOf(this.trigger) === 0;
},
selectTemplate: function (item) {
return '@' + item.original.value;
},
menuItemTemplate: function (item) {
return item.string;
},
noMatchTemplate: function () {
return '<li class="tribute-no-match">No match found!</li>';
},
trigger: '@',
requireLeadingSpace: true,
allowSpaces: true,
positionMenu: function (menu, trigger) {
var rect = trigger.getBoundingClientRect();
menu.style.left = rect.left + 'px';
menu.style.top = rect.bottom + 'px';
menu.style.width = '300px'; // set the width of the dropdown menu
return menu;
},
onSelect: function (item) {
instance.data.editor.html.insert('@' + item.original.value + ' ');
setTimeout(function() {
instance.data.editor.events.focus();
}, 0);
}
});
e.preventDefault();
}
}
This all looks to be working, apart form the fact that we are thrown the following error:
e.focus is not a function
Each time I start my search by typing '@'.
Any ideas how to solve this? Thank you in advance!