ckeditor not displaying until page reload

[hello-gawjus]

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?

[hello-gawjus]

Actually this may have something to do with turbolinks. When I hit the new url from the browser address bar ckeditor works. When I hit it from a menu item it doesn't. So it's not really about page reloads. It's seems to be about turbolinks compatibility.

Any suggestions would still be appreciated.

[hello-gawjus]

Removing //= require turbolinks from application.js does resolve the issue. Is there a turbolinks compatibility solution?

[tsechingho]

you can disable turbolinks by specific tag attribute.

<div data-no-turbolink>
<%= f.text_area :content, :class => 'ckeditor' %>
</div>

[yosepkim]

I am having the same issue.

[xescugc]

At the documentation of Turbolinks you can found a 'solution' https://github.com/rails/turbolinks/#opting-out-of-turbolinks , it works for me if added it to the link that brings me to the ckeditor page.

[Ryel]

Thanks for raising this issue - saved me a lot of time

[Kyle-Falconer]

None of these were working for me. I ended up punting and just removing turbolinks completely from my project. That fixed it for me.

[cweilemann]

+1 with @netinept - I tried adding data-no-turbolink to the parent div of a textarea, and still had no luck. The only solution I've found so far is to remove turbolinks completely.

[mwanas]

I have tried to include $('.ckeditor').ckeditor(); on each page that uses checkeditor and now it is working fine

[trkrameshkumar]

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 .)

[AllaKishore]

ckeditor not displaying until page reload in angularjs
give me solution

[WiechersV]

Still an issue

[isratmir]

  $(document).on('page:update', function(){
      console.log('page updated');
      if ($('.ckeditor')[0]) {
          CKEDITOR.replace($('.ckeditor').attr('id'));
      }
  });

• page:before-change a Turbolinks-enabled link has been clicked (see below for more details)
• page:fetch starting to fetch a new target page
• page:receive the page has been fetched from the server, but not yet parsed
• page:before-unload the page has been parsed and is about to be changed
• page:after-remove a node (stored in event.data) has been removed from the DOM and should be cleaned up (jQuery data is cleaned up automatically)
• page:change the page has been changed to the new version (and on DOMContentLoaded)
• page:update is triggered alongside both page:change and jQuery's ajaxSuccess (if jQuery is available - otherwise you can manually trigger it when calling XMLHttpRequest in your own code)
• page:load is fired at the end of the loading process.

[Deleted user]

could you be more explicit please ?
i use simple_form with bootstrap, my views _form constructed with haml (rails-4.2.2)
nothing works with turbolinks and ckeditor, but also where to add the jquery script ? i can not read it in your answer @isratmir .
also, if i comment turbolinks from views/layout/application.haml, no error, but not more ckeditor.
Lack of knowledge and informations around this ckeditor and this turbolinks "data-no-turbolink" with simple_form...
thanks for provide little bit more information guys (if possible).

[isratmir]

@Jerome2 try to add to application.js in app/assets/javascript folder

[Deleted user]

waiting guys, i think is not the good area for post comment issue.
first i installed gem jquery-turbolinks (and restart nginx server)
then no more problem with turbolinks.
(need your jquery good code for update the page alone and see it directly)
second, if i not use the way of simple_form in my form, it works, so this is to ask at simple_form gem issues area.
but thanks again for help.

[kelso]

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.

[Deleted user]

@kelso: thanks, this works also, but for some ther stuff, jquery-turbolinks help me.
that's fine, thank you.

[cbstodd]

Thanks @kelso, that did the trick.

[u007]

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()
)

[nwshane]

@kelso's method works for Turbolinks Application Visits but not for Restoration Visits (when the user uses the forward and back buttons).

https://github.com/turbolinks/turbolinks#navigating-with-turbolinks

This is the code I'm using:

var RichTextArea = (function() {
  var exports = {};
  var selector = '.js-become-rich-text-editor';

  function removeInstance(editor_id) {
    // Remove any old ckeditor elements from page
    $('.cke_editor_' + editor_id).remove();

    // Remove CKEditor instances from JavaScript
    CKEDITOR.remove(CKEDITOR.instances[editor_id]);
  }

  exports.load = function() {

    // Get already loaded instances
    var loaded_instances = Object.getOwnPropertyNames(CKEDITOR.instances);

    $(selector).each(
      function() {
        var editor_id = $(this).attr('id');

        // Remove CKEditor instance if already loaded.
        // Necessary for compatibility with Turbolinks restoration visits,
        // in which the instances are not removed
        if (loaded_instances.includes(editor_id)) {
          removeInstance(editor_id);
        }

        // Initialize CKEditor instance
        CKEDITOR.replace($(this).attr('id'));
      }
    );

  }

  return exports;
})();

$(document).on('page:change', function() {
  RichTextArea.load();
});

To use, just add the class js-become-rich-text-editor to any editors you want to change into CKEditors.

Explanation:

• The RichTextArea.load method is called on every page:change event (whenever Turbolinks changes the page).
• loaded_instances contains the IDs of any CKEditor instances that have already been loaded
• for each element with the class js-become-rich-text-editor on the page: 1) remove the instance from the page and from CKEDITOR.instances, and 2) initialize a new CKEditor instance

[karlingen]

You can solve this by using data: { no_turbolink: true } on the link_to helper.

The a element linking to the page where the ckeditor textarea is located must have data-no-turbolink="true" set in order to instruct turbolinks to be temporarily disabled for that page.

[guyviner]

trkrameshkumar 's solution commented on 22 Sep 2014
worked for me
if you're using AJAX, place this script at the bottom of your new.js.erb file
CKEDITOR.replace('element_id');
Don't forget to add an id of 'element_id' to your text_area tag in the view file, like so:
f.cktext_area :foobar, id:"element_id" .
finally a solution thank you!

[zw963]

@u007 's solution worked for me, rails version: 5.1.4

But Turbolinks.Cache()' is failed, TypeError: Turbolinks.Cache is not a function`.

[u007]

@zw963 remove the cache part

[zw963]

@u007, thanks, that worked.