Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TinyMCE - have to refresh the page

When I navigate to a page with TinyMCE it displays regular textareas until I refresh the page because of turbolinks. This is a pretty well-documented issue and people generally recommend some form of the following:

$(document).on('page:change', function () {
    <code here>
}); 

I've tried every variation on this to no avail.

like image 275
Danny Santos Avatar asked Nov 11 '16 14:11

Danny Santos


People also ask

How do you reload TinyMCE?

You need to use the remove() API to detach TinyMCE from the DOM before you close your Modal window. You can then use init() again when the modal is recreated.

Is TinyMCE responsive?

The TinyMCE editor can be made responsive by using css media queries. Simply add css rules that set the width property of table. mceLayout and the tinyMCE textareas.

How do you get rid of Tinyed by power on TinyMCE?

Use the branding option to disable the "Powered by Tiny" displayed in the status bar for product attribution.

How do I reinitialize TinyMCE editor?

Use tinymce. remove() method to remove TinyMCE editor from the HTML element and again call tinymce. init() on the selector to reinitialize.


1 Answers

The problem was that a lot of the discussion around this issue is quite outdated and doesn't take into account that turbolinks events have changed as of 5.0.0.

I was able to solve the problem with the following:

$(document).on('turbolinks:load', function () {
   tinymce.remove();
   tinymce.init({selector:'.tinymce'});
});

A full list of turbolinks events can be found here

like image 102
Danny Santos Avatar answered Oct 14 '22 12:10

Danny Santos