Edgar Kamdem Edgar Kamdem - 5 months ago 49
Ajax Question

Get a specific content (with Ajax) of a CKEditor among many other CKEditor which have all the same class name

I work with a PHP foreach loop that generates many datas from the server. In the same time, it also generates multiple CKEditor elements matching specific datas.

To have multiple CKEditor elements, I used :



<script>
$(document).ready(function() {
CKEDITOR.replaceClass = 'ta-contribution'; //Here ta-contribution is a class
});
</script>





Instead of



<script>
CKEDITOR.replace('ta-contribution'); //Here ta-contribution is an id
</script>





Here is my php file (with a foreach loop), assuming I put off all my php variable :



<?php

foreach ($this->data as data) {

?>

<!-- blah-blah -->

<div id="contributions">
<textarea class="ta-contribution" id="ta-contribution" name="text" class="col-md-10" style="height:300%; padding: 0px;" required autofocus></textarea>
<input class="btn-contribution btn btn-primary col-md-2" type="submit"/>
<input id="num_user" type="hidden" name="num_user" value="<?=$this->numuser?>">
</div>

<!-- blah-blah -->
<?php
}?>

<!-- blah-blah -->





I want to retrieve the current CKEditor content of the button where I click for Ajax purpose.

I know we can use this to retrieve CKEditor content:



ckEditor = CKEDITOR.instances.ta-contribution.getData();





But it only works when we have one instance of CKeditor with an id, I have multiple instance with a same class.

Here is the beginning of my ajax.js file where I want to retrieve the contents :



$(document).ready(function() {

$('.btn-contribution').click(function (e) {

e.preventDefault();


//I am stuck



})


})





But I'm blocked because I can't get CKEditor contents.
How can I do that. Please help.

Answer

Your first problem is that your for loop is causing many fields to all have the same id (contributions, ta-contribution, and num_user). I'd add a counter to your loop and then append that counter to all those ids (and probably the name attributes too). Once you did that, you would be able to access them by id using the instances property as you mentioned.

You can still keep the ta-contribution class and instantiate all the editors using that class while still allowing you to access each instance by id.

CKEDITOR.replaceClass('ta-contribution');
CKEDITOR.instances.ta-contribution1.getData();
CKEDITOR.instances.ta-contribution2.getData();
CKEDITOR.instances.ta-contribution3.getData();
Comments