100€ - for solving Issue of removing/destroying instances

Sorry to be annoying here within this forum.
I need help urgently with my problem of removing CKEditor instances.

I will pay 100 Euro to anyone who can fix the issue.
Problem:
1. I load content dynamically through into a div container.
2. Withing the loaded content theres a textarea with class 'cked'
3. Replace all textareas with class 'cked' with CKEDITOR's
4. Destroy editors properly ( which isnt working )
5. Load again the content and apply again CKeditors ( isnt working properly due instance already exists)

Testcase:
Site: http://www.adwintiser.com/testcase.html
Content being loaded: http://www.adwintiser.com/testsample.html
Code:

    <html>
       <head>      
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />                
          <script src="/scripts/mootools_1_3.js" type="text/javascript"></script>
          <script src="/scripts/mootools_more_1_3.js" type="text/javascript"></script>            
          <script src="/assets/scripts/ckeditor/ckeditor.js" type="text/javascript"></script>                     
            </head>

      <body>   
        <script language="javascript">
        window.addEvent('domready', function() {     
          $('loader').addEvent('click',function(){
            loadEdit();
          });
          $('loadagain').addEvent('click',function(){
           
       CKEDITOR.instances['ROW[text]'].destroy();
       CKEDITOR.remove('ROW[text]');
       //loadEdit();
          });
        }
        );
        function loadEdit(){
          $('content').set('load',{onSuccess:function(){applyEditor();}});
          $('content').load("testsample.html");
        }
        function applyEditor(){
          CKEDITOR.replaceAll('cked');   
        }
        </script>
        <div id="content" style="background:white;border:2px solid gray;">content will be loaded here</div> 
        <a id="loader" style="border:2px solid red;">load content</a> 
        <a id="loadagain" style="border:2px solid green;">remove ckeditor</a>      
      </body>
    </html>

So anyone who can fix that issue and write me a bill will get the money through wire transfer :-)

Fri, 02/25/2011 - 23:29

dmitriip

Joined: 23/02/2010

Posts: 7

Re: 100€ - for solving Issue of removing/destroying instanc

$('loadagain').addEvent('click',function(){
if(CKEDITOR.instances['ROW[text]') { // destroy only if already have
CKEDITOR.instances['ROW[text]'].destroy();
}
loadEdit();
});

function loadEdit(){
$('content').set('load',{onSuccess:function(){
if(!CKEDITOR.instances['ROW[text]') {// create only if already not created
applyEditor();
}
}});
$('content').load("testsample.html");
}

Mon, 02/28/2011 - 03:27

pgteam

Joined: 13/09/2010

Posts: 84

Re: 100€ - for solving Issue of removing/destroying instanc

what u need is a callback function

Thu, 03/03/2011 - 12:28

icemania

Joined: 15/04/2010

Posts: 4

Re: 100€ - for solving Issue of removing/destroying instanc

Are you wanting muliple editors to load everytime you click the load content button?

Thu, 03/03/2011 - 14:38

icemania

Joined: 15/04/2010

Posts: 4

Re: 100€ - for solving Issue of removing/destroying instanc

Not sure if this is what you are after or will help (I'm using Jquery) at all.

This is the content I load in (editload.htm)

<div>Title:<input type="text" id="title[]" /></div>
<div>Text:<textarea class="cked" id="text0"></textarea></div>
<div>Text1:<textarea class="cked" id="text1"></textarea></div>

Notice the numbers in the id (text0), this way you can have as many as you like but make sure you don't miss any numbers, unless you alter the JS to check for this (i haven't)

This is the main page, you'll need to alter the links to the javascript to match yours:

<html>
<head>      
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/jquery-1.4.2.min.js" type="text/javascript"></script>                
<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="/ckeditor/adapters/jquery.js" type="text/javascript"></script>             
</head>

  <body>   
    <script language="javascript">  
    $(document).ready(function() {
       
//will empty the content div and reload the whole thing a again
       $("#loader").click(function(){
          $("#content").empty();
          $("#content").load("editload.htm",function(){
             removeEdit();
             loadEdit();   
         });
       });
  
//will reset just the textareas
       $("#loadagain").click(function(){
          removeEdit();
          loadEdit();   
       });
    
       function removeEdit(){
         $(".cked").each(function(index){
            var instance=CKEDITOR.instances["text"+index];
            if(instance) {
               CKEDITOR.instances["text"+index].destroy(true); 
            }
         });
       }
    
    
      function loadEdit(){   
         $(".cked").each(function(index){
            CKEDITOR.replace($("#text"+index).attr("id"),{height:200});
            CKEDITOR.instances["text"+index].setData("Default content");
         });
       }
      
    });
        
    </script>
    <div id="content" style="background:white;border:2px solid gray;">content will be loaded here</div>
    <a id="loader" style="border:2px solid red;cursor:pointer">load content</a> 
    <a id="loadagain" style="border:2px solid green;">remove ckeditor</a>      
  </body>
</html>