为什么 styleselect-button 没有出现在我的 Tinymce 工具栏菜单中？

Question

我在我的 rails 应用程序中添加了 TinyMCE 编辑器。

初始化时，可以向 TinyMCE 编辑器添加一系列选项，例如：

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

如果我省略了“工具栏”的选项，我就可以使用样式选择按钮，如下面的 GIF 中所示。

但是，当我为“工具栏”添加选项时，样式选择按钮没有显示。

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"
})

在下面的 GIF 中，当我为工具栏添加选项时，您可以看到样式选择按钮是如何消失的。

为什么样式选择按钮没有出现在我的 Tinymce 工具栏菜单中？

ruby-版本：3.1.2

rails-版本：7.0.3

我的设置

#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()
  }

}

Answer 1

TinyMCE 6 重命名了一些选项、UI 组件、命令等......为了更好的一致性（以及其他原因）。 styleselect 工具栏是迁移指南中可以看到的工具栏之一：https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/#things-we-renamed。

因此，要实现此功能，您只需在 TinyMCE 配置中将 styleselect 更改为 styles。例如：

//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()
  }

}

为什么 styleselect-button 没有出现在我的 Tinymce 工具栏菜单中？

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

tinymce

ruby-on-rails