usage with CKEditor

Download your CKEditor package

<script src="http://cdn.ckeditor.com/4.4.4/basic/ckeditor.js"></script>

Configure

var at_config = {
  at: "@",
  data: names,
  tpl: "<li data-value='@${name}'>${name} <small>${email}</small></li>"
}

// Bind to every CKEditor instance that'll load in the future
CKEDITOR.on('instanceReady', function(event) {
    
  var editor = event.editor;
    
  // Switching from and to source mode
  editor.on('mode', function(e) {
    load_atwho(this, at_config);
  });
  
  // First load
  load_atwho(editor, at_config);
    
});

function load_atwho(editor, at_config) {
  
  // WYSIWYG mode when switching from source mode
  if (editor.mode != 'source') {

    editor.document.getBody().$.contentEditable = true;
      
    $(editor.document.getBody().$)
      .atwho('setIframe', editor.window.getFrame().$)
      .atwho(at_config);
      
  }
  // Source mode when switching from WYSIWYG
  else {
    $(editor.container.$).find(".cke_source").atwho(at_config);
  }
  
}

Prevent adding a new line when pressing ENTER

var ckeditor = $('#yourSelector').ckeditor({...}).ckeditorGet();
ckeditor.enableEnter = true; //Use this as a flag

ckeditor.on('instanceReady',function(event) {
  var at_config = {...};

  this.document.getBody().$.contentEditable = true;
  $(this.document.getBody().$).atwho(at_config);
  $(this.document.getBody().$).on('shown.atwho', function(event){
      ckeditor.enableEnter = false;
  });
  $(this.document.getBody().$).on('hidden.atwho', function(event){
    setTimeout(function(){
      //console.log("hide! setting to TRUE");
      ckeditor.enableEnter = true;
    },100); //Give it a small time so that the ENTER key only affects the popup and not the editor
  });
});

ckeditor.on( 'key', function( event ) {
  if ( event.data.keyCode == 13 && !ckeditor.enableEnter ) {
    event.cancel();
  }
});