This example project demonstrates the integration of the TinyMCE editor in Rails 7. It utilizes the well known tinymce-rails gem and offers full Turbo Drive support through an additional Stimulus controller.
Since Rails 7 the turbo-rails library is included by default. Turbo Drive intercepts link clicks and form submits. It makes sure that only the <body>
part of the page is rerendered instead of the whole page.
This leads to TinyMCE not being properly detached and reattached when a Turbo Drive response is rendered. The textarea will appear without the TinyMCE editor. The Stimulus controller helps to reattach TinyMCE and respects the settings in config/tinymce.yml
.
Details about the integration can be found in this Gist.
1. Clone the repository
git clone https://github.com/david-uhlig/example-tinymce-rails7-turbo
cd example-tinymce-rails7-turbo/
Then run bundle install
2. Start the server
rails s --port 3000
Open http://localhost:3000 in your browser.
tinymce-rails
README for the general setup.- Blog post "Making TinyMCE work with Rails, Turbolinks and Stimulus" from djchadderton with the main idea for the Stimulus controller included in this demo.
The tinymce-rails
gem is not strictly necessary. You may also use the Tiny Cloud CDN similarly as described here.
1. Add the following line to the <head>
section of app/views/layouts/application.html.erb
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
2. Add the initialization to your Stimulus controller
initialize() {
this.defaults = {
selector: '.tinymce',
toolbar: [
'styleselect | bold italic | undo redo',
'image | link'
],
plugins: 'lists link image table code help wordcount'
}
}
3. Replace the connect function in the Stimulus controller
connect() {
let config = Object.assign({ target: this.inputTarget }, this.defaults)
tinymce.init(config)
}
The settings will no longer be read from config/tinymce.yml
but from the Stimulus controller instead.
I would be very interested in a solution utilizing bin/importmap pin tinymce
. This seems to be the favorable way going forward in Rails 7. I had no luck making it work, though.