CKEDITOR-按其ID或CLASS选择span并获取其data属性值 | 按其ID或CLASS选择span并获取其data属性值

本文介绍了CKEDITOR-按其ID或CLASS选择span并获取其data属性值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何使用jQuery在CKEditor中管理内容?

How do you manage the content in CKEditor with 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

到这一点为止，这个效果很好.

Until this point, this works nice.

现在我该如何简单地在CKeditor iframe中或其他任何情况下，选择具有ID = sub3的span，然后获取其内容(此处为Name)及其属性(在这里是6)?

Now how can I simply, in the CKeditor iframe or whatever, select for example the span with the ID = sub3 and after that get its content (here : Name) and its attribute data-time-start (here : 6)?

此外，如何循环选择>类的每个元素

Moreover, in a loop, how can I select each element with the class sub>

类似的事情，但是使用CKEDITOR的方法:

Something like this, but with method of 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 ??
});

我试图获得类似的内容，但是之后.我该怎么做呢?

I tried to get the content like that, but after. How do I do this?

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

推荐答案

我在桌面上克隆了您的项目，它对我有用！但是在Fiddle中，IT无法正常工作！当心！我不知道为什么，但是在摆弄它不起作用时，请尝试以下操作:

i clone ur project on my desktop, and it work for me! But in Fiddle IT does not work! Be careful! I dont know why, but in fiddle it just dont work, try that:

<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初始化之前调用了函数，我找不到用于init的回调，因此输入超时稍有延迟，为此，我对其进行了测试-一切正常！

It was 2 trouble - first on fiddle, and second - we call function before ckeditor initialize, i cant find callback for init, so input timeout with a little delay, for it, i test it - all works fine!

这篇关于CKEDITOR-按其ID或CLASS选择span并获取其data属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！