CKEditor - Получить элемент по Id или класса

Question

Я пытаюсь получить элемент с его ID или класса, но без успеха ...

Не удается прочитать свойство «GetByID» неопределенной

я следовать инструкциям здесь: CKEDITOR docs GetById()

Вот мой код:

$(document).ready(function() { 
    ckeditor_init(); 
}); 

var $textarea = $('#tiny_mce_block').find('textarea').attr('id'); 
function ckeditor_init() { // This works 
    CKEDITOR.replace($textarea, { 
     language: 'fr', 
     allowedContent: true, 
    }); 

    var editor = CKEDITOR.instances[$textarea]; // This works 
    var $dataCkeditor = editor.getData(); // This works 

    var el = $(editor.document.getById('2')); // This doesn't work ! 

    console.log(el); 
} 

FIDDLE: http://jsfiddle.net/B4yGJ/395/

В моих $dataCkeditor = editor.getData(); я это:

<span class="st" id="1" data-time-start="0.29" data-time-end="1.259" data-time-moy="0.1938">mardi </span> 
<span class="st" id="2" data-time-start="2.048" data-time-end="5.406" data-time-moy="0.10832258064516">qualité sécurité efficacité </span> 

Как я могу выбрать элемент либо идентификатор (в моем случае "2") или класс (в моем случае, например "st") и после получения "data-time-start"?

спасибо!

Answer 1

Используйте instanceReady событие (см мой previous answer):

http://jsfiddle.net/oleq/LjggqL1m/

function ckeditor_init() { // This works 
    CKEDITOR.replace(textarea, { 
     language: 'fr', 
     allowedContent: true, 
     on: { 
      instanceReady: function() { 
       var editor = this; 
       var data = editor.getData(); 
       var el = $(editor.document.getById('2')); 

       alert(el); 
      } 
     } 
    }); 
} 

Вы также могли бы получить заинтересованы в editor#contentDom событие, которое выстреливает DOM каждый раз, когда редактора загружается, то есть на editor.setData().

Answer 2

Вам необходимо запустить линию, которая устанавливает значение $textarea внутри обработчика DOMReady, в противном случае значение будет null как элемент не будет доступен в DOM, когда код выполняется. Попробуйте это:

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

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

    var editor = CKEDITOR.instances[textarea]; 
    var $dataCkeditor = editor.getData(); 
    var el = $(editor.document.getById('2')); 
    console.log(el); 
} 

Заметим также, что префикс $ в основном используется в JavaScript для обозначения переменных, содержащих объект JQuery. Поскольку у textarea var есть только строка, я удалил $ для согласованности.