Edgar Kamdem Edgar Kamdem - 2 years ago 114
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 :

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

Instead of

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

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


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

<!-- blah-blah -->

<!-- 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) {


//I am stuck



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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download