Question

I have TinyMCE initializing textareas that have been loaded via AJAX callback, in a colorbox modal window containing jQuery UI tabs panels. The panel that the textareas are being loaded into are scrollable (overflow-y:auto). However, it seems that when I initialize TinyMCE on these new textareas, it scrolls about halfway down to one of the lower textareas on the list, and initializes them correctly, but you can no longer scroll the container panel’s div in Chrome. You can still scroll the panel’s div in Firefox and IE, but not in Chrome.

My AJAX call:

function getStuff(id){
        $.ajax({
            type: 'POST',
            url: '/ajax/get_stuff',
            data: {id: id},
            beforeSend:function(){  
                $('#panel').html('Loading...');                                 
            },
            success:function(resp){             
                $('#panel').html(resp); 
                ckInit();
            },
            error:function(){}
        }); 
    }

and the initialize function:

function ckInit(){
    var config = {              
             extraPlugins : 'autogrow',
             autoGrow_onStartup : true ,
             removePlugins : 'resize'               
        };
    $("textarea.ck").each(function() {              
        if (typeof(CKEDITOR.instances[this.id]) == 'undefined') {           
            CKEDITOR.replace(this.id, config);
        } else {
            CKEDITOR.instances[this.id].destroy(true);
            CKEDITOR.replace(this.id, config);
        }           
    });
}

If any other info would be helpful, please let me know. And, thanks in advance!

UPDATE
I had a feeling Colorbox had something to do with it, so I tried loading the instances instead in the main window, to the same exact result. The container div is scrolled down an arbitrary amount, and the scrollbar freezes. Trying to move it up and down will not scroll.

I tried replacing TinyMCE with CKeditor, and strangly, same exact problem. Which makes me feel like I’m initializing them wrong, or something…

Any ideas?

UPDATE 4/28
It seems that if I initialize the text areas individually, the scrollbar does not freeze. However, when I initialize the textareas based on the class selector, as shown in the example above, it does.

Another weird behavior: If I click back and forth to select one of the editors and then another, and if I do this a few times, it unlocks the scroll bar. Somehow, the act of switching the current editor a few times frees it up.

Answer 1

I am having the same issue, did either of you find a solution to this?

EDIT: So it appears that it is definitely the hash in the URL causing the problem. I am not happy about the following solution, but it does work…

$('body').on('click', 'a', function(e){
  if( $(this).attr('href') === '#' ) e.preventDefault(); 
});

Hope that helps someone, but please if anyone figures out a better solution please let me know.

I found the following articles which may be of assistance:

http://cksource.com/forums/viewtopic.php?t=25351

https://github.com/cleditor/cleditor/issues/10