I want to add both emojione and at.js (autocomplete) with a froala editor textarea. emojione works fine but at.js does not work.
versions: froala_editor v3.1.0 EmojioneArea v3.1.5 at.js - 1.5.3
Here is my snippet:
// Define data source for At.JS.
var datasource = ["Jacob", "Isabella", "Ethan", "Emma", "Michael", "Olivia" ];
// Build data to be used in At.JS config.
var names = $.map(datasource, function (value, i) {
return {
'id': i, 'name': value, 'email': value + "@email.com"
};
});
// Define config for At.JS.
var config = {
at: "@",
data: names,
displayTpl: '<li>${name} <small>${email}</small></li>',
limit: 200
}
$('#froala-editor').emojioneArea({
autocomplete: false,
pickerPosition: "top",
tonesStyle: "bullet",
saveEmojisAs: "unicode"
});
// Initialize editor.
$('#froala-editor')
.on('froalaEditor.initialized', function (e, editor) {
editor.$el.atwho(config);
editor.events.on('keydown', function (e) {
if (e.which == $.FroalaEditor.KEYCODE.ENTER && editor.$el.atwho('isSelecting')) {
return false;
}
}, true);
})
.froalaEditor()
<div id="froala-editor">
</div>
It looks like you are using the V2 syntax to initialize Froala. Try to initialize it like this:
// Initialize editor.
var editor = new FroalaEditor('#froala-editor', {
events: {
initialized: function() {
$(editor.el).atwho(config);
editor.events.on('keydown', function (e) {
if (e.which == FroalaEditor.KEYCODE.ENTER && $(editor.el).atwho('isSelecting')) {
return false;
}
}, true); }
}
});