Назначение событий элементам span в текстовой области CKEditor

Я пытаюсь связать событие с каждым предложением, введенным в текстовую область CKEditor. Я разделяю предложения, а затем добавляю теги <span>, чтобы разграничить предложения, присваивая каждому предложению уникальный идентификатор с индексом 1 (т. Е. Таким образом, первое предложение имеет идентификатор: «sen_1»).

Я считаю, что успешно выбираю предложения, так как могу вывести их на консоль. Однако я не могу назначать им события.

var el = CKEDITOR.instances.rawText.document.getById('sen_1');
    if (el !== null) {
        // not used, el is an object, e is just the span element and its contents
        var e = el['$'];
        el.on('click', function() {
            alert('I should see this');
        });
    }

Я пытался настроить приведенный выше код, но безуспешно. Я попытался изменить событие с «щелчка» на различные другие методы (в конечном итоге я изменю это на отложенное наведение, но я хотел сначала отсортировать привязку события), но не имел никакого успеха.

Это такой небольшой объем кода, что у меня такое чувство, что я упускаю что-то очевидное, но пока не могу отследить, что именно.

РЕДАКТИРОВАТЬ: я нашел этот пост, который выглядит как это может решить мою проблему с добавлением событий в теги <span>. Однако событие contentDom не срабатывает.

var userText = CKEDITOR.instances.rawText;

userText.on( 'change', function() {

    ...
    // get text from CKEditor
    // wrap each sentence in <span> tags (I want events bound to these)
    // setData of CKEditor as the sentences wrapped
    // ajax calls to MongoDB to store sentence info
    ...

    userText.on( 'contentDom', function() {
        var el = userText.document.getById('sen_1');
        console.log(el);
        userText.editable().attachListener( el, 'click', function(e) {
            alert("See?");
            e.data.getTarget();
        });
    });

}

Я не вижу, чтобы el регистрировалось, и я не могу найти какое-либо событие contentDom ни в Chrome, ни в инструментах разработчика Safari. В настоящее время у меня есть это внутри

Любые идеи о том, что может быть причиной того, что contentDom не срабатывает? Я понимаю, что contentDom должен сработать, когда содержимое редактора будет готово. Я попытался поместить событие contentDom вне события change, и там это сработало. Однако для меня это практически бесполезно, так как количество тегов <span> будет меняться по мере изменения пользовательского ввода.


person 31rhcp    schedule 28.06.2016    source источник
comment
Попробуйте делегирование событий. Прослушайте редактируемый элемент (editor.editable()) и проверьте цель события.   -  person Anna Tomanek    schedule 29.06.2016
comment
Я нашел ответ, который, кажется, может решить добавление событий в мои диапазоны здесь: stackoverflow.com/questions/17045329/. Однако по какой-то причине событие 'contentDom' не срабатывает. Я отредактировал свой пост для более подробной информации.   -  person 31rhcp    schedule 30.06.2016