tinymce 4 个自定义类供用户使用

Question

如何向 tinymce 4 添加自定义类？我希望有一个选择，用户可以在其中选择要在其文本上使用的类。我不想使用像前景色这样的标准插件，因为我想提供一些我的用户可以使用的类。

简短示例：

tinymce 编辑器“选择类”（工具栏中的按钮）

• 红色
• 蓝色
• 绿色

my_custom_css.css

.red { color: red; }
.blue { color: blue; }
.green { color: green; }

Answer 1

您可以为此使用style_formats 配置选项。 TinyMCE 文档提供了您需要的所有信息：http://www.tinymce.com/wiki.php/Configuration:style_formats

该选项中指定的样式将出现在下拉菜单中，并且可以作为内联样式和类应用。如果您选择将类应用于所选元素，您可能希望使用 content_css 选项为编辑器的内容添加自定义样式表。

在您的示例中，配置的相应部分如下所示：

tinymce.init({
    ...
    style_formats: [
        {title: 'Red', inline: 'span', classes: 'red'},
        {title: 'Green', inline: 'span', classes: 'green'},
        {title: 'Blue', inline: 'span', classes: 'blue'}
    ],
    content_css: 'my_custom_css.css'
});