CKEDITOR - 通过 ID 或 CLASS 选择 span 并获取其数据属性值答案

【问题标题】：CKEDITOR - Select span by its ID or CLASS and get its data attribute valueCKEDITOR - 通过 ID 或 CLASS 选择 span 并获取其数据属性值
【发布时间】：2015-03-26 10:16:04
【问题描述】：

CKEditor 中如何使用 jQuery 管理内容？

我有这个 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">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>                
</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
    });
}

JSFIDDLE

到目前为止，这很好用。

现在我该如何简单地在 CKeditor iframe 或其他任何内容中选择 span 和 ID = sub3，然后获取其内容（此处为：Name）及其属性 @987654328 @（这里：6）？

此外，在一个循环中，我如何选择每个具有类sub的元素>

类似这样，但使用 CKEDITOR 的方法：

$.each($(CKEditor.getBody()).find(".sub"), function () { // How select SUB class name in CKEDITOR ??
     var d = $(this).attr("data-time-start"); // HOW SELECT FOR EACH 'SUB' HIS data-time-sart attribute in CKEDITOR ??
     $(".st").removeClass("active"); // HOW REMOVE CLASS FOR ALL class 'SUB' in CKEDITOR ??
     $(this).addClass("active"); // HOW ADD CLASS 'active' TO THIS 'SUB' in CKEDITOR ??    
});

我试图获得这样的内容，但之后。我该怎么做呢？

 var editor = CKEDITOR.instances[textarea];
 var $dataCkeditor = editor.getData();

【问题讨论】：

在我的桌面上解决，你自己试试！告诉，如果它不起作用，我们会找到问题的

标签： jquery dom ckeditor

【解决方案1】：

我在我的桌面上克隆了你的项目，它对我有用！但是在小提琴中它不起作用！当心！我不知道为什么，但是在小提琴中它只是不起作用，试试这个：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ckeditor.com/apps/ckeditor/4.0/ckeditor.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<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">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>
</div>
<script type='text/javascript'>
var textarea;
$(document).ready(function () {
    textarea = $('#ckeditor_block').find('textarea').attr('id');
    CKEDITOR.replace(textarea, {
        language: 'fr',
        uiColor: '#9AB8F3',
        allowedContent: true,
        disallowedContent: 'script; *[on*]',
        enterMode: CKEDITOR.ENTER_BR,
        toolbar: [
            ['Bold', 'Italic', 'Underline', '-', 'TextColor', '-', 'RemoveFormat'],
            ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'],
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight'],
            ['Find', 'Replace', 'SelectAll'],
            ['Source', '-', 'Maximize', '-', 'Save']
        ]
    });
    function waitInit(){
        var subs = $( CKEDITOR.instances.editor1.window.getFrame().$ ).contents().find('.sub' );
        $.each(subs, function(){
            $this = $(this);
            console.log("value = " + $this.text());
            console.log("time = " + $this.attr('data-time-start'));
        });
    }
    CKEDITOR.on('instanceReady', function(){ waitInit(); });
});   
</script>
</body></html>

这是 2 麻烦 - 首先是小提琴，其次 - 我们在 ckeditor 初始化之前调用函数，我找不到初始化的回调，所以输入超时有点延迟，为此，我测试它 - 一切正常！

【讨论】：

data-* 属性可以通过$(myObject).data('time-start') 访问。
我忘记了在哪里，但是 .data 不起作用，我总是在 .attr 中使用完整的 'data-*'，但感谢您的评论（ps 我认为它是在 VM 上的 ie8）跨度>
感谢您的帮助，但我知道您发布的内容。事实上，我正在使用 CKEDITOR（请参阅我的 JSFIDDLE）。它与管理我想要的东西不同。
我编辑了答案，所以 - 你的主要麻烦 - 从 ckeditor 的 iframe 中获取元素，对吧？
未定义的值 .. :( 请参阅此 FIDDLE 中的控制台：jsfiddle.net/zagloo/7hvrxw2c/5

【解决方案2】：

或者你只是做了以下事情，

var ele = $(editor.editable().$);
$('span',ele).each(function(){
   console.log($(this).text());
   console.log($(this).attr('id'));
});
//editor represent your instance in CKEditor

-谢谢。

【讨论】：