ckeditor-rails: ckeditor not displaying until page reload

Hi tsechingho, I’m using rails 4, bootstrap and ckeditor_rails.

Using the following in my _form view:

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

results in a regular bootstrap flavored text_area the first time I visit new or edit. However, if I reload the page, it works. The text_area becomes fully ckeditor enabled.

I have tried loading js file (//= require ckeditor-jquery) before and after bootstrap but this has no effect.

Any ideas?

About this issue

Original URL
State: open
Created 11 years ago
Comments: 26 (2 by maintainers)

Most upvoted comments

This works for me without removing turbo links. Add a id for ckeditor textara Add this script on every bottom of the page where ever you want to enable the ckeditor,

<script>
        CKEDITOR.replace('element_id')
</script>

Replace the element_id with your element id

Note: element_id should not contain id selector($ or .)

trkrameshkumar on Sep 22, 2014

for those using turbolinks5

jQuery(document).on('turbolinks:load', (e)->
    #do your initialize here
    $('textarea.ckeditor').each(->
        if $(this).css('visibility') != 'hidden'
            CKEDITOR.replace(this)
    )
    if Turbolinks
        Turbolinks.Cache()
)

u007 on Mar 22, 2016

You can keep turbolinks enabled, just reinitialize ckeditor each time page is changed (turbolinks event):

Create custom app/javascripts/ckeditor/reinit.js:

$(document).bind('page:change', function() {
  $('.ckeditor').each(function() {
    CKEDITOR.replace($(this).attr('id'));
  });
});

And add class='ckeditor' to your <textarea>. That’s all.

kelso on Aug 14, 2015