CKEditor - get attribute of element with Onclick

Question

I'm trying to get the value of the attribute data-time-start when I click on the span.

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

My 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
    });
}

I tried with this:

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

But nothing appened ...

How to do that please ? thank you !!

axel.michel · Accepted Answer · 2015-03-31T10:11:37.127

3

You can't (or better you shouldn't) use the default jQuery event/element handling in this case, because the CKEditor comes with its very own event/ element system.

Update: Based on the comments below, to avoid CKEditor's quirky behaviour, it is better to use attachListener instead of jQuery's 'on' to bind an event listener

Step one: Bind the click event:

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

Step two: Find and access the data attribute:

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');
        }
    );
});

For more info check the CKEditor docs.

Updated fiddle is here

edited Mar 31 '15 at 10:11

answered Mar 30 '15 at 09:10

axel.michel

5,764
1
15
25

Hum... In fact I have a litlle problem when I load my page : Uncaught TypeError: Cannot read property 'on' of undefined – Zagloo Mar 30 '15 at 09:38
1

Be sure that ID of your textarea corresponds the CKEditor instance, check if the event object really contains a data element, and the type of it. – axel.michel Mar 30 '15 at 09:40
The answer is correct. Still I disagree with "You can't use the default jQuery event/element handling in this case". It's possible but cumbersome – see [my answer](http://stackoverflow.com/questions/29217675/how-do-i-use-jquery-to-directly-manipulate-ckeditor-content/29231223#29231223). – oleq Mar 31 '15 at 08:17
The answer is not fully correct. Or in other words it is correct, but you will encounter CKEditor's [quirky behaviour](http://dev.ckeditor.com/ticket/13122). See my answer: http://stackoverflow.com/a/17051511/1464696. The solution is to use `editable.attachListener()`. – Reinmar Mar 31 '15 at 09:43
@oleq Impressing way, but it might cause other problems, as Reimar mentioned in his comment. Therefore I recommend to do it as described in his answer here: http://stackoverflow.com/questions/17045329/ckeditor-how-to-add-permanent-onclick-event/17051511#17051511 – axel.michel Mar 31 '15 at 10:09

CKEditor - get attribute of element with Onclick

1 Answers1