CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
LewlSauce
LewlSauce

Reputation: 5892

TinyMCE only loads on page refresh

I'm using Tinymce-Rails with Ruby on Rails and trying to figure out why the TinyMCE text editor boxes aren't working unless I refresh the page.

So I've followed all the documentation for getting it to work... but the only problem is that it only works after I refresh the page for the first time. Here's the javascript that's responsible for initializing TinyMCE

var ready;

ready = function(){
  tinyMCE.init({
    selector: "textarea.tinymce",
    toolbar: ["styleselect | undo redo | bold italic underline | bullist | outdent indent"],
    menubar: false,
    statusbar: false,
    style_formats: [{"title":"Headers","items":[{"title":"Header 1","format":"h1"},{"title":"Header 2","format":"h2"},{"title":"Header 3","format":"h3"}]},{"title":"Inline","items":[{"title":"Bold","icon":"bold","format":"bold"},{"title":"Italic","icon":"italic","format":"italic"},{"title":"Underline","icon":"underline","format":"underline"},{"title":"Code","icon":"code","format":"code"}]}],
    content_css: "/assets/tinymce.css"
  });

};

$(document).ready(ready);
$(document).on('page:load', ready);

Does anyone know why this isn't actually working when I browse to the page for the first time, but only works for the second time?

Upvotes: 3

Views: 4780

Answers (3)

cratag
cratag

Reputation: 122

I couldn't make it work by disabling turbolinks or with the event listener so the solution I found, in serendipity, was adding

tinymce.remove()

and I had console errors because content and skins

skin: false,
content_css: false

My example code:

import tinymce from 'tinymce/tinymce'
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'
import 'tinymce/skins/content/default/content.css'

function tinyMce() {
    tinymce.remove();    
    tinymce.init({
        selector: 'textarea#default',  // change this value according to your HTML
        height: 400,
        plugin: 'a_tinymce_plugin',
        a_plugin_option: true,
        a_configuration_option: 400,
        skin: false,
        content_css: false
       })}
   
export { tinyMce };

Note that I'm using rails 6 and webpacker so your solution might vary

Upvotes: 5

Yoko
Yoko

Reputation: 803

Late to the party, but I solved this by wrapping my TinyMCE function in an event listener. This way I don't have to disable turbo links completely, because yeah, I like it.

document.addEventListener("turbolinks:load", function() {
  tinymce.init({
    selector: '.tinymce',
    height: 500,
    skin: false,
    menubar: false,
    plugins: [
      'wordcount'
    ],
    toolbar: 'undo redo | formatselect | ' +
      'bold italic backcolor | alignleft aligncenter ' +
      'alignright alignjustify | bullist numlist outdent indent | ' +
      ' removeformat'
  });
});

Upvotes: 0

Jay-Ar Polidario
Jay-Ar Polidario

Reputation: 6603

I stumbled upon your question since I had the same issue. After spending around an hour, I found out that turbolinks was the one causing the problem. From official github, I quote:

Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head

I cannot tell the exact reason but it indeed had an effect.

To disable turbolinks, I followed this link

1) Remove “gem “turbolinks”” from your Gemfile and run bundle.

2) Remove “//= require turbolinks” from application.js.

3) Remove any “data-turbolinks-track” attributes in your layouts.

Upvotes: 8

Related Questions