Jump to content
terungwa

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.