CKEditor - получить атрибут элемента с Onclick

Question

Я пытаюсь получить значение атрибута data-time-start, когда я нажимаю на span.

Мой FIDDLE: http://jsfiddle.net/zagloo/7hvrxw2c/20/

HTML:

<textarea id="editor1"> <span class="sub" id="sub1" data-time-start="0">Hello </span> 
     <span class="sub" id="sub2" data-time-start="2">My </span> 
     <span class="sub" id="sub3" data-time-start="6">Name </span> 
     <span class="sub" id="sub4" data-time-start="8">Is </span> 
     <span class="sub" id="sub5" data-time-start="12">Zoob</span> 
    </textarea> 

Мои JS:

var textarea; 

$(document).ready(function() { 
    textarea = $('#ckeditor_block').find('textarea').attr('id'); 
    ckeditor_init(); 
}); 

function ckeditor_init() { 
    CKEDITOR.replace(textarea, { 
     language: 'fr', 
     allowedContent: true 
    }); 
} 

Я пытался с этим:

CKEDITOR.on('click', function (e) { 
     var element = $(e.target); 
     console.log(element); 
     var cursor = element.data("timeStart"); 
     console.log(cursor); 
    }); 

Но ничего appened ...

Как это сделать, пожалуйста? Спасибо !!

Answer 1

В этом случае вы не можете (или лучше не использовать) использовать обработку событий/элементов jQuery по умолчанию, потому что CKEditor поставляется с собственной системой событий/элементов.

Update: На основании приведенных ниже комментариев, чтобы избежать изворотливый поведения CKEditor, это лучше использовать attachListener вместо JQuery-х «на», чтобы связать прослушиватель события

Шаг один: Свяжите событие щелчка :

var editorInstance = CKEDITOR.instances['editor1']; 
editorInstance.on('contentDom', function() { 
    editorInstance.editable().attachListener( 
     this.document, 
     'click', 
     function(event) { 
      // execute the code here 
     } 
    ); 
}); 

Шаг два: Поиск и доступ к атрибуту данных:

var editorInstance = CKEDITOR.instances['editor1']; 
editorInstance.on('contentDom', function() { 
    editorInstance.editable().attachListener( 
     this.document, 
     'click', 
     function(event) { 
      /* event is an object containing a property data 
      of type CKEDITOR.dom.event, this object has a 
      method to receive the DOM target, which finally has 
      a data method like the jQuery data method */ 

      event.data.getTarget().data('time-start'); 
     } 
    ); 
}); 

Для получения дополнительной информации проверьте CKEditor docs.

Updated fiddle is here