CKEditor - Get Element by Id or Class

Question

I'm trying to get an element with his ID or Class but with no success...

Cannot read property 'getById' of undefined

I follow instructions here : CKEDITOR docs GetById()

Here is my code:

$(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/

In my $dataCkeditor = editor.getData(); I have this:

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

How can I select an element either by an ID (in my case "2") or by a Class (in my case for example "st") and after get the "data-time-start" ?

thanks !

Put `$textarea = $('#tiny_mce_block')` inside `$(document).ready`. That's its sole purpose. — Jeremy Thille, Mar 24 '15 at 09:41

score 2 · Accepted Answer · edited May 23 '17 at 12:22

2

Use instanceReady event (see my 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);
            }
        }
    });
}

You could also get interested in editor#contentDom event, which fires each time editor's DOM is loaded, i.e. on editor.setData().

edited May 23 '17 at 12:22

Community

1
1

answered Mar 24 '15 at 10:59

oleq

15,697
1
38
65

Thanks Dude !! It works for me ! How to get the content of "el" ? and how can I do for select every element who are the Class .st and then get their attribute (data-time-start) ? thx – Zagloo Mar 25 '15 at 11:06

score 0 · Answer 2 · answered Mar 24 '15 at 09:41

You need to run the line which sets the $textarea value inside the DOMReady handler, otherwise the value will be null as the element will not be available in the DOM when the code is executed. Try this:

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

Note also that the $ prefix is primarily used in javascript to denote variables holding a jQuery object. As the textarea var only holds a string, I have removed the $ for consistency.

I did what you told me but always the same problem "Cannot read property 'getElementById' of undefined" — Zagloo, Mar 24 '15 at 09:59

score 0 · Answer 3 · answered Apr 23 '18 at 06:03

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

score 0 · Answer 4 · answered Jan 29 '21 at 14:12

Here, I have assigned/stored CKEditor as global variable.

In HTML file:

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

JS File.

Here getById || find() || findOne methods useds
Custom config also loaded
JQuery Method to find Element

Startup focus trigged

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 - Get Element by Id or Class

4 Answers4