CODEWITHSUNDEEP
google-chromeruby-on-rails-4tinymce-4
Javel LP
Javel LP

Reputation: 173

TinyMCE 4.1.6 editor does not appear in Chrome sometimes

I found that sometimes tinymce editor in my rails webapp does not appear when using Chrome automatically. When this happens I have to refresh the page to make it appear. IE and firefox do not have such problem. Any idea?

I am using no plugins and tried to firebug the problem (like in here http://www.tinymce.com/forum/viewtopic.php?id=16402) but get no results. I am using the custom skin light.

Upvotes: 0

Views: 1806

Answers (3)

Lucas Souza
Lucas Souza

Reputation: 11

Thanks for your help. Your example works for me on PHP.

I just do this way bellow.

tinymce.remove();

setTimeout(function () {
    tinymce.init({selector: '#textarea'});
}, 2000);

I had to add a setTimeout() method because directly don't work.

Every time that I have to change the value on text-area I called this method again to load the component.

Upvotes: 1

Javel LP
Javel LP

Reputation: 173

The problem was related to turbolinks, I tried to disable it for tinymce textarea but it dind't work. Finally, I disabled completely turbolink for all the site:

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => false %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>

and in the body tag <body data-no-turbolink>

This solved the problem mentioned.

Additionally, since the turbolinks is disabled the performance of the site has improved, specifically I don't see any Flash of unstyled content which was other problem I have in the app.

Upvotes: 1

Thomas
Thomas

Reputation: 622

I assume that you are using 'tinymce-rails'. I had a similar problem and it is related to turbolinks. Te way I solved it was:

  1. Make sure that tiny-mce assets are loaded by your page by adding <%= tinymce_assets %> to your application layout.

  2. Remove and init tiny-mce on $(document).ready and 'page:load' on the page where you want to use it.

    function initTinyMCE() {
    tinymce.remove();
    tinymce.init({
        selector: '<your-selector>',
        skin: 'lightgray'
    });
}

$(document).ready(function () {
    initTinyMCE()
});
document.addEventListener('page:load', function () {
    initTinyMCE()
});

That works for me. Hope it helps.

Upvotes: 3

Related Questions