jquery adapter and ckeditor issue

Question

I am doing some php programming with jquery adapter and ckeditor on my page. Let me show what I have. The page I am working on is index.php

A jquery adapter:

    function sendid(id)
     {
    jQuery('#mydiv').showLoading();
    $.ajax({
        type: "POST",
        url: "",
        data: id,
        error: function(){

          alert('error');
      },
      success: function(data){
        jQuery('#mydiv').hideLoading();
            $('#mydiv').html(data);
  }
  });
}
}

This function sends an id to index.php . Whith this Id I am fetching my database and get some records. With the record I got, I am displaying it via ckeditor like this:

          <?php
            $ckeditor = new CKEditor();
            $ckeditor->basePath  = 'ckeditor/' ;
            CKFinder::SetupCKEditor( $ckeditor, 'ckfinder/' ) ;
            $config['height'] = '300';
            $initialValue = $queryresult['content'];
            $ckeditor->editor('FCKeditor1', $initialValue, $config);
        ?>

Whenever I click the button which calls sendid() function ckeditor appears above the list of ids. The first time when I call sendid() function it works ok and puts the record into ckeditor. However second time I call the sendid() function ckeditor disappears.

I found a topic in this link:

CKEditor instance already exists

but it becomes very hard for me, where to place the codes mentioned in the link. As far as I understood I have to kill or destroy the editor everytime I click the button for sending the id to sendid() function. But whenever I put destroy or kill ckeditor into sendid() function it did not work.

Could you please help me on this.

oleq · Accepted Answer · 2012-09-18T12:34:26.600

Please, download the latest CKEditor from http://ckeditor.com/download. Unpack it on your server so you can run it, for example http://localhost/ckeditor_test/ (anywhere you like).

Now, save the following code in the same directory where all the editor files have been unpacked (ckeditor.js, ckeditor_php5.php and so on) as index.php.

Open the webiste and enjoy clicking the button. This sample (sandbox, actually) will let you understand how to replace an editor dynamically and destroy existing instances to avoid conflicts.

<?php if ( $_SERVER[ 'REQUEST_METHOD' ] === 'POST' ): ?>
    <?php
        include( 'ckeditor_php5.php' );

        $ckeditor = new CKEditor();
        $ckeditor->editor( $_POST[ 'id' ], 'This is my initial value!', array(
            'height' => '300'   // Config to be used
        ));
    ?>
<?php else: ?>

    <!DOCTYPE html>
    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    </head>
    <body>
        <div id="mydiv" style="outline: 2px dashed orange; padding: 20px; margin: 0 0 20px;">
            This is where the editor will be loaded.
        </div>
        <button id="load" type="submit">Load the editor via AJAX!</button>
        <script>

            (function( $ ) {
                var id = 'idOfTheEditor';

                $( '#load' ).on( 'click', function() {
                    $.ajax({
                        type: 'POST',
                        url: 'index.php',
                        data: {
                            id: id
                        },
                        error: function(){
                            console.log( 'Error?' );
                        },
                        success: function( data ) {
                            if ( window.CKEDITOR && CKEDITOR.instances[ id ] ) {
                                console.log( 'Desytroying an existing instance!' );
                                CKEDITOR.instances[ id ].destroy();
                            }
                            $( '#mydiv' ).html( data );
                        }
                    });
                });

            })( jQuery );

        </script>
    </body>
    </html>
<?php endif ?>

You can eventually wrap $( '#mydiv' ).html( data ) in setTimeout closure like this to see your code working in "slow motion":

setTimeout( function() {
        $( '#mydiv' ).html( data );
}, 1000 );

Have fun!

oleq thank you so much,it worked. what I did is based on what you sent me, I modified the jquery adapter like: function sendid(id) { jQuery('#mydiv').showLoading(); $.ajax({ type: "POST", url: "", data: "id="+id, error: function(){ alert('error'); }, success: function(data){ jQuery('#mydiv').hideLoading(); if ( window.CKEDITOR && CKEDITOR.instances[ id ] ) { CKEDITOR.instances[ id ].destroy(); $('#mydiv').html(data); } }); } } — ilhank, Sep 18 '12 at 12:25
You're welcome! Make sure your id is passed properly. Also `jQuery === $`, so `('#mydiv')` can be `$('#mydiv')` if you don't use any other libraries which could overwrite `$` namespace. — oleq, Sep 18 '12 at 12:39

score 1 · Answer 2 · answered Sep 18 '12 at 08:48

1

I believe your jQuery code should look like this for the patch to work:

function sendid(id)
     {
    jQuery('#mydiv').showLoading();
    $.ajax({
        type: "POST",
        url: "",
        data: id,
        error: function(){

          alert('error');
      },
      success: function(data){
        jQuery('#mydiv').hideLoading();

        var instance = CKEDITOR.instances['FCKeditor1'];
        if(instance) {
            instance.destroy(true);
        }
        CKEDITOR.replace('FCKeditor1');

        $('#mydiv').html(data);
  }
  });
}
}

answered Sep 18 '12 at 08:48

Zathrus Writer

4,311
5
27
50

Hi Zathrus, Thank you so much for your reply. I tried it and this time even in the first time ckeditor did not appear. – ilhank Sep 18 '12 at 08:53
so you don't have a CKEditor on the page before you click the button for the first time at all? – Zathrus Writer Sep 18 '12 at 09:40
First I just have list of ids and I click the one that I want to modify. #mydiv, in which there is a CKEditor, appears in the same page. – ilhank Sep 18 '12 at 10:11
could you update your question with a sample HTML code? I'm not quite sure I understand now :) – Zathrus Writer Sep 18 '12 at 10:32
Hey zathrus I tried to post some code but stackoverflow did not let me to answer for 5 hours. Is there any way that I can send you the code? – ilhank Sep 18 '12 at 11:00
there you go Zathrus, I uploaded it as an image and here is the [link](http://b1209.hizliresim.com/11/l/d55wf.png) – ilhank Sep 18 '12 at 11:11
there is a tag at the end of the document. I forgot to write it. – ilhank Sep 18 '12 at 11:16
Zathrus above post of oleq fixed my problem – ilhank Sep 18 '12 at 12:28
sry, I didn't have time to reply... glad it solved your problem :) – Zathrus Writer Sep 18 '12 at 12:37

jquery adapter and ckeditor issue

2 Answers2