DEV Community

Cover image for Upgrade TinyMCE to v6 in Rails/Stimulus

Upgrade TinyMCE to v6 in Rails/Stimulus

djchadderton on February 11, 2023

A couple of years ago, I wrote a post on how to integrate the text editor TinyMCE into a Rails app using Stimulus. While most of that post is stil...
Collapse
 
mxmb profile image
m.b.

I highly recommend using tinymce.remove(this.inputTarget) instead of just tinymce.remove(). Using it without an argument will destroy all the instances visible on the current page, not just the one binded to this specific controller instance.

Collapse
 
djchadderton profile image
djchadderton

Yes, you're correct. Thanks. I have implemented something like this since I wrote this article, but at first I found that if I went to another page and used the back button, the text box would either be uneditable or duplicated, suggesting it wasn't being removed properly. I ended up storing the initialised instance on connect and then removing it by passing its ID on disconnect. I'll edit the article to reflect this.

Collapse
 
philsmy profile image
Phil Smy

This isn't working for me. I have everything connected, and it gets to the tinymce.init(config) line and passes with no errors but nothing is on the page! It's quite strange.

I end up with this:

<div role="application" class="tox tox-tinymce" aria-disabled="false" style="visibility: hidden; height: 700px;">
.... whole bunch of other stuff
</div>
Enter fullscreen mode Exit fullscreen mode

We can see the box is hidden. But even manually changing that CSS doesn't give the right display.

Collapse
 
djchadderton profile image
djchadderton • Edited

That's what I get as well as the code TinyMCE replaces the textarea tag with, so it looks like the javascript is running. I'm not sure what to suggest, other than going through all of the different options and making sure they're correctly set, especially any that have changed their names (like styleselect to style), the ones I've mentioned above and others in the link to the official documentation.

In fact, I may start by disabling all but the most basic options to see if that works and then re-enabling them gradually to see where it breaks.