CKEditor - Get Element by Id or Class

Question

I'm trying to get an element with his ID or Class but with no success...

Cannot read property 'getById' of undefined

I follow instructions here : CKEDITOR docs GetById()

Here is my code:

$(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/

In my $dataCkeditor = editor.getData(); I have this:

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

How can I select an element either by an ID (in my case "2") or by a Class (in my case for example "st") and after get the "data-time-start" ?

thanks !

Answer 1

Use instanceReady event (see my 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);
            }
        }
    });
}

You could also get interested in editor#contentDom event, which fires each time editor's DOM is loaded, i.e. on editor.setData().