CKEDITOR.replace() method to replace a dynamic <textarea> element with CKEditor is not working

[terungwa]

Hello, I could not figure wether this question should be posted in the javascript forum or here.

 

I am building a simple blog commenting application that displays a comment reply box whose textarea has a dynamically generated ID when a reply link is clicked

 

Take a look at my html code below:

                <div>
                  <div>
                    Some message over here
                   </div>
                   <div style = "height:10px;"> <a class="reply" id="myHeader1" href="javascript:showonlyone('newboxes1');" >Reply</a></div>                                        
                </div>
                <div class ="replymsgbox" id="newboxes1">
                    <form method="POST">
                        <textarea id="" class="content"></textarea>
                    </form>
                </div>   
                <div>
                  <div>
                    Some message over here
                   </div>
                  <div style = "height:10px;"> <a class="reply" id="myHeader2" href="javascript:showonlyone('newboxes2');" >Reply</a></div>                                        
                </div>
                <div class="replymsgbox" id="newboxes2">
                    <form method="POST">
                        <textarea id="" class="content" ></textarea>
                    </form>
                </div>

And this is the javascript dynamically generating the ID:

The javascript script below uses the parent(); children() and next() jquery methods to traverse the DOM and select the textarea element of the displayed form so as to assign the 'ID attribute' to it.

<script type="text/javascript">
   $('a.reply').on("click", function(e){   
         $(this).parent("div").parent("div").next("div").children('form').children('textarea').attr( "id", "ckeditor" );
     });
</script>

When the reply link is clicked, the comment box with a form is toggled using the jquery show() and hide() functions. See code snippet below:

<script src="views/js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
   function showonlyone(thechosenone) {
      $('.replymsgbox').each(function(index) {
         if ($(this).attr("id") == thechosenone) {
            $(this).show(200);
         }
         else {
           $(this).hide(600);
         }
     });
   }
</script>

I then wish to replace the dynamic (textarea id="comment") with a CKEditor instance using the code below:

<script src="libraries/ckeditor/ckeditor.js"></script>  
<script type="text/javascript">
   $(document).ready(function() {    
    if(CKEDITOR) 
    {
       // Replace the <textarea id= "ckeditor"> with a CKEditor instance. 
       CKEDITOR.replace('ckeditor');
    }
 });
</script>

However, when I toggle the comment form, (the id="ckeditor") attribute is assigned, but what appears is a simple textarea not with ckeditor enabled on it.

 

How can I make each new dynamically created textareas use CKeditor?

or

Why is the CKEDITOR replace() method not detecting the textarea ID?

 

Perhaps someone here may have any clues?

 

Note: that when I hardcode the id='ckeditor' attribute value pair into any of the text areas, that textarea is converted into a rich text editor.

[isabella_martin]

Before loading the CKEditor library, you should load the javascript or jQuery libraries.Make sure you following the right way of configuring CKEditor in  the web page.