CKEDITOR

Question

当我单击 CKEDITOR 正文中的元素时，我试图获取属性 "data-time-start" 的值。

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

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

适用于单词 My 和 Zoob 但是如果我单击带有 style color 或 strong 或其他内容的文本，它 return 为空...

我试过添加这样的条件但是没办法...

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

请问该怎么做？谢谢！！

Answer 1

这里我从jqueryclosest()方法中找到价值

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

查看这个jsFiddle

CKEDITOR - 单击元素时从父级获取属性

CKEDITOR - get Attribute from Parent when clicked on element

javascript

jquery