Question

我正在尝试使用他的ID或Class获取元素，但没有成功......

无法读取未定义的属性'getById'

这是我的代码：

$(document).ready(function () {
    ckeditor_init();
});

var $textarea = $('#tiny_mce_block').find('textarea').attr('id');
function ckeditor_init() { // This works
    CKEDITOR.replace($textarea, {
        language: 'fr',
        allowedContent: true,
    });

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

    var el = $(editor.document.getById('2')); // This doesn't work !

    console.log(el);
}

FIDDLE：http://jsfiddle.net/B4yGJ/395/

在我的$dataCkeditor = editor.getData();我有这个：

<span class="st" id="1" data-time-start="0.29" data-time-end="1.259" data-time-moy="0.1938">mardi </span>
<span class="st" id="2" data-time-start="2.048" data-time-end="5.406" data-time-moy="0.10832258064516">qualité sécurité efficacité </span>

如何通过ID（在我的情况下为"2"）或类（在我的情况下为"st"）和获取"data-time-start"之后选择元素？< / p>

谢谢！

Answer 1

使用instanceReady事件（请参阅我的previous answer）：

http://jsfiddle.net/oleq/LjggqL1m/

function ckeditor_init() { // This works
    CKEDITOR.replace(textarea, {
        language: 'fr',
        allowedContent: true,
        on: {
            instanceReady: function() {
                var editor = this;
                var data = editor.getData();
                var el = $(editor.document.getById('2'));

               alert(el);
            }
        }
    });
}

您也可能对editor#contentDom事件感兴趣，每次加载编辑器的DOM时都会触发该事件，即在editor.setData()上。

Answer 2

您需要运行在 DOMReady处理程序中设置$textarea值的行，否则该值将为null，因为该元素在DOM中不可用当代码执行时。试试这个：

var textarea; $(document).ready(function () { ckeditor_init(); textarea = $('#tiny_mce_block').find('textarea').attr('id'); }); function ckeditor_init() { CKEDITOR.replace(textarea, { language: 'fr', allowedContent: true, }); var editor = CKEDITOR.instances[textarea]; var $dataCkeditor = editor.getData(); var el = $(editor.document.getById('2')); console.log(el); }

另请注意，$前缀主要用于javascript以表示包含jQuery对象的变量。由于textarea var仅包含字符串，因此我删除了$以保持一致性。

Answer 3

    var textarea;
$(function () {
  textarea = $('#tiny_mce_block').find('textarea');
  ckeditor_init();
});
function ckeditor_init() {
 for(var i = 0; i < textarea.length; i++){
    CKEDITOR.replace(textarea[i]);
    var editor = CKEDITOR.instances[textarea[i]];
 }
}

Answer 4

在这里，我已将 CKEditor 分配/存储为全局变量。

在 HTML 文件中：

<div id="maineditor"></div>

JS 文件。

这里getById || find() || findOne 使用的方法
自定义配置也已加载
JQuery 查找元素的方法

启动焦点已触发

var GlobalEditor =null; 
  $(document).ready(function () {
   editor_initialize_events();

   //Here Find Element id/Class and It's return CKEditor DOM Element || 
    var _byId= CKEDITOR.document.find('#I1');
    var _byClass= CKEDITOR.document.findOne('.myClass');  
   // You can find element by Global varibale
    var _byId= GlobalEditor.document.find('#I1');
   // JQuery
   var el = $(GlobalEditor.document.getById('2').$);
 });    
 function editor_initialize_events() {    
    GlobalEditor = CKEDITOR.replace('maineditor', {
       customConfig: DOMAIN_ROOT + "ckeditor/config6.js",
       startupFocus: true
     });
}

CKEditor - 按ID或类获取元素

4 个答案: