Froala At.js integration

[mmmf84]

I have a problem with the integration with froala editor. I follow the document and use this code: ` var config = {

  at: '@',
  callbacks: {
    remoteFilter: function(query, callback) {
            var thisVal = query,
            self = $(this);
            if( !self.data('active') && thisVal.length >= 1 ){
                $.post('/users/list', {q: query}, function(data) {
                    callback(data)
                },'json');
            }
        }
    },

  selector: '#new_comment',
  displayTpl: '<li>${name}</li>',
  insertTpl: '<a class='big' href='/${id}/${slug}' target='_blank'>${name}</a>',
  limit: 200
};

$('#new_comment')

        .on('froalaEditor.initialized', function (e, editor) {
        // Add At.JS
        editor.$el
        .atwho(config)
        .on('inserted.atwho', function () {
            editor.$el.find('.atwho-inserted').removeAttr('contenteditable');
        })

        editor.events.on('keydown', function (e) {
            if (e.which == $.FroalaEditor.KEYCODE.ENTER && editor.$el.atwho('isSelecting')) {
            return false;
        }
        }, true);
    })
  .froalaEditor();

The data is loaded and entered correctly. The problem arises when I send the data to the database because if after inserting an element with at.js no key is pressed, instead of sending the template it simply sends the query entered up to that moment while if I press any key afterwards upon insertion by at.js then the tamplate is sent correctly.

[MadMikeyB]

I am receiving the same issue with the Trumbowyg Editor.

I absolutely have to select the item from the list with my mouse rather than with my keyboard arrow keys and enter.

So for example, if I have an item which is :lookaround: - and I type :look and hit enter to enable the autocomplete, it only submits :look and not the inserted :lookaround: image associated.

var emojisList = $.map(emojis, function(value, i) {
      return {'id': i, 'name': value};
    });

    $(".trumbowyg-editor").atwho({
      at: ':',
      displayTpl: "<li class='editor-emoticon'><img src='/images/emoticons/${name}.gif' height='20' width='20'/></li>",
      insertTpl: "<img src='/images/emoticons/${name}.gif' height='20' width='20'/>",
      data: emojisList,
      limit: 300
    });

Is the code I am using.