TinyMCE:如何更改格式 ("Paragraph"、 "Heading 1"等)

Question

默认情况下，TinyMCE (4) 有一个“Paragraph ▼”下拉菜单，如果你点击它，你会得到一个格式选项列表(“Paragraph”、“Heading 1”等)。

我希望能够做两件事。首先，我想更改选项及其名称(例如，更改为“正常”和“标题”)，然后我找到了 block_formats选项正是这样做的:

block_formats: 'Normal=p;Heading=h1'

但是，我坚持第 2 件事:向生成的元素添加类。代替普通 <h1>元素，当有人选择“标题”时，我想生成一个 <h1 class="heading"> .

我想也许这会奏效:

block_formats: 'Normal=p;Heading=h1.heading'

...但事实并非如此，而且我找不到任何其他选项可以让我这样做。再说一次，TinyMCE 文档并不总是最容易找到答案的地方，这就是我来到这里的原因。

有谁知道我如何配置 TinyMCE 以在生成的元素上有一个带有自定义名称和自定义类的“段落 ▼”下拉列表？

Answer 1

我从来没有找到一种方法来做到这一点，所以我最终做的是完全删除块格式下拉列表并将其替换为(自定义)格式下拉列表。换句话说，我:

删除了 formatselect来自 toolbar1 config(删除不可配置的正常格式下拉菜单)

将自定义格式下拉列表( styleselect )添加到 toolbar1配置

定义了一个 style_formats使用我的自定义样式的配置条目

style_formats配置看起来像这样:

style_formats: [
    {
        title: 'Header',
        inline: 'span',
        classes: 'someClass',
        styles: {someStyle: '5px'}
    },
], // next style would go here

这种方法只有两个缺点。首先，下拉菜单现在显示“格式”，我似乎无法在任何地方进行配置。但是，我确实有一个格式下拉列表，只有我想要的选项，这些选项将所需的类添加到格式化文本中，因此下拉列表的名称没什么大不了的。

第二个问题是 TinyMCE 使用 <iframe> ，这会阻止它使用我们的样式表。我可以为 TinyMCE 编写一个样式表，然后将其附加到 <iframe> (或者使用一些 TinyMCE 机制，如果有的话)...但我很懒所以我只使用了 style:每个自定义格式的条目以定义样式。