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

Question

我将TinyMCE编辑器添加到我的 Rails 应用程序中。

初始化时，可以向 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()
  }

}