Must hit refresh button to load text_area with correct formatting, Javascript and Rails project

Question

I'm using CKeditor https://github.com/tsechingho/ckeditor-rails. in a Rails 4 app.

I have it working, however, I have to hit the refresh button on the page where the WYSIWYG is set up. In my application.js file I have this:

$( document ).ready(function() { //this line was my attempt to fix the problem
$('.ckeditor').ckeditor({
  // optional config
});
}); //and this one which is just closing the function

What I mean is I get to the page where WYSIWYG should be and all that shows is a small text_area. When I hit the refresh button, the WYSIWYG shows up. I thought the document.ready function would fix it but apparently not. any idea why?

my rails code snippet in the view template is this:

<%= f.text_area  :description, :class => 'ckeditor' %>

Answer 1

Try

var ready;
ready = function() {  
  $('.ckeditor').ckeditor({
    // optional config
  });
};
$(document).ready(ready);
$(window).load(ready);

I guess that your page is loaded via AJAX or you using Turbolinks, do you?

Answer 2

Try initializing it on $(window).load

Answer 3

The problem is Turbolinks, as mentioned above. The solution can be found here: https://github.com/rails/turbolinks/#opting-out-of-turbolinks

You must include turbolinks and do a couple things mentioned in the link above.