CODEWITHSUNDEEP
javascriptjqueryckeditor
Zagloo
Zagloo

Reputation: 1387

CKEDITOR - get Attribute from Parent when clicked on element

I'm trying to get the value of the attribute "data-time-start" when I click on an element in CKEDITOR body.

My FIDDLE : http://jsfiddle.net/7hvrxw2c/25/

HTML :

<div id="ckeditor_block">
    <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"><strong>Name</strong></span>
       <span class="sub" id="sub4" data-time-start="8"><strong><span style="color:#800080;">was</span></strong></span> 
       <span class="sub" id="sub5" data-time-start="12">Zoob</span>
    </textarea>
</div>

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

    var editorInstance = CKEDITOR.instances['editor1'];
    editorInstance.on('contentDom', function () {
        editorInstance.editable().attachListener(this.document, 'click', function (event) {
            console.log(event.data.getTarget().data('time-start'));
        });
    });
}

Works for words My and Zoob But it return null if I click on text with style color or strong or whatever...

I tried to add a condition like this but no way...

if (element.$.className === "st") {
   cursor = event.data.getTarget().data("time-start");
} else {
   cursor = event.data.getTarget().$.parentElement.offsetParent.firstElementChild;
}

How to do that please ? thank you !!

Upvotes: 2

Views: 2449

Answers (1)

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

Here I find value from jquery closest() method 

editorInstance.on('contentDom', function () {
    editorInstance.editable().attachListener(this.document, 'click', function (event) {
        var el = event.data.$.target.closest("span.sub");
        console.log($(el).data('time-start'));
    });
});

View this jsFiddle

Upvotes: 2

Related Questions