Unable to read data from dynamically added CKEditor textarea

Question

We are currently working on a java web application, where one of the jsp pages will have dynamically generated rich text areas and we are using CKEditor for that purpose. I'm able to generate the text editors dynamically. There is button on the jsp page, on clicking it a java script method adds a new row, with textarea, to the table. Once the row is added, we are using the CKEDITOR.replace('editorName'); method to replace the textarea to CKEditor. Below is the code:

jsp:

<table id="StepsList" style="float: left" width="100%" ></table>

We are maintaining a variable rowNum to keep a track of number of textarea's created.

script:

var step = 'step'+rowNum;
$("#StepsList").append("<tr><td><div class='richTextareaWrapp bottmsp' style='margin-top:10px;'><textarea cols='40' id="+step+" name="+step+"></textarea></div></td></tr>");
CKEDITOR.replace(step);

To read the content of the generated CKEditors, we are iterating based on rowNum. Below is the code written in java script file:

script:

for(var j=1;j<=rowNum;j++){
        obj = new Object();
        step = '#step'+j;
        $(step).ckeditor(function( textarea ){
            obj.value=$(textarea).val();
          });

        jsonStepsArr.push(obj);
    }

This throws an error saying "uncaught exception: The editor instance "step1" is already attached to the provided element."

I have gone through similar posts on stackoverflow and google for solution, most of them suggest to replace or destroy the instance. But it did not serve my purpose. Can anyone point out my mistake or if I have to add any code to make this work?

Thanks in advance.

Marek Lewandowski Marek Lewandowski · Accepted Answer · 2015-01-12T09:15:57

Be consistent in your creation/accessing techniques.

Looks like if you're going to create an editor with normal CKEDITOR.replace call like:

CKEDITOR.replace( 'editor1' );

And then access it with a jQuery call like:

$( '#editor1' ).ckeditor( function( textarea ) {
    // Do whatever...
} );

It won't play nice with each other.

Your solution:

So as a result either change your first call to:

$('#'+step).ckeditor();

Or in second call instead using jQuery, just access instance directly:

CKEDITOR.instances[ 'step'+j ].getData()

Unable to read data from dynamically added CKEditor textarea

1 Answers