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.
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.
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.
Use the branding option to disable the "Powered by Tiny" displayed in the status bar for product attribution.
Use tinymce. remove() method to remove TinyMCE editor from the HTML element and again call tinymce. init() on the selector to reinitialize.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With