Skip to content

usage with CKEditor

Harold.Luo edited this page Aug 23, 2014 · 9 revisions

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>"
    }

    CKEDITOR.replace('editor').on('instanceReady', function(event) {
      // Make sure the textarea's `contentEditable` property is set to `true`
      this.document.getBody().$.contentEditable = true;
      $(this.document.getBody().$)
        .atwho('setIframe', this.window.getFrame().$)
        .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();
    }
});