Search code examples
ruby-on-railstinymce

Why is the styleselect-button not showing up in my toolbar menu in Tinymce?

I added the TinyMCE-editor to my rails app.

When initializing, it is possible to add a range of options to the TinyMCE-editor, for example:

    tinymce.init({
      selector: ".tinymce-textarea",
      plugins: 'advlist autolink lists link image charmap preview anchor pagebreak code table',
      menubar: true
})

If I leave out the options for "toolbar", I am able to use the styleselect-button, as you can see in the GIF below.

However, when I add the options for "toolbar", the styleselect-button is not showing up.

tinymce.init({
  selector: ".tinymce-textarea",
  plugins: 'advlist autolink lists link image charmap preview anchor pagebreak code table',
  menubar: true,
  toolbar: " styleselect | h1 h2 h3 | undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | code styleselect table"
})

In the GIF below, you can see how the styleselect-button isn't there anymore, when I add the options for the toolbar.

Why is the styleselect-button not showing up in my toolbar menu in Tinymce?

ruby-version: 3.1.2

rails-version: 7.0.3

My setup

#importmap.rb
pin "tinymce", to: "https://cdn.tiny.cloud/1/my-key/tinymce/6/tinymce.min.js"


//tinymce_controller.js
import "tinymce"
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "textarea", "css", "output" ]

  connect() {
    tinymce.init({
      selector: ".tinymce-textarea",
      plugins: 'advlist autolink lists link image charmap preview anchor pagebreak code table',
      menubar: true,
      toolbar: "styleselect | h1 h2 h3 | undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | code styleselect table",
      //toolbar_mode: 'floating',
    })
  }

  disconnect () {
    tinymce.remove()
  }

}

enter image description here

Solution

  • TinyMCE 6 renamed a number of options, UI components, commands, etc... for better consistency (among other reasons). The styleselect toolbar was one of those as can be seen in the Migration Guide: https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/#things-we-renamed.

    So to get this working you'd just need to change styleselect to styles in your TinyMCE configuration. For example:

    //tinymce_controller.js
import "tinymce"
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "textarea", "css", "output" ]

  connect() {
    tinymce.init({
      selector: ".tinymce-textarea",
      plugins: 'advlist autolink lists link image charmap preview anchor pagebreak code table',
      menubar: true,
      toolbar: "styles | h1 h2 h3 | undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | code styles table",
      //toolbar_mode: 'floating',
    })
  }

  disconnect () {
    tinymce.remove()
  }

}