froalaemojioneat.js

at.js does not work on fraola editor when emojionearea is combined on same editor


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>


Solution

  • 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);      }
        }
      });