TinyMCE 4 style_formats 不工作

Question

我正在使用 TinyMCE 4.7.4 版和我的剃须刀形式

我添加了 style_formats 选项和相关样式表，但自定义格式没有出现在“格式”下拉列表中，只有默认样式。

tinymce.init({
        selector: 'textarea',
        height: 200,
        theme: 'modern',
        menubar: false,
        toolbar1: 'formatselect | bold italic | numlist bullist',
        content_css: [
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '@Url.Content("~/Content/css/rte/rte.tinymce.css")'
        ],
        style_formats: [
            { title: 'Red', inline: 'span', classes: 'header-bolded' }
        ]
    });

rte.tinymce.css CSS:

/**name:Header*/
h3{
    font-size: 1.2rem;
    color: #D3D63C;
}

/**name:Paragraph*/
p{font-size: 0.8rem;}

.header-bolded {
    color: #d6d63e;
}

在格式下拉列表中，我仍然有：段落、6 个标题和预格式化样式。

只有 'Red' 格式应该可用，不是吗？

Answer 1

您在该列表中看到的内容取决于多种设置：

https://www.tinymce.com/docs/configure/content-formatting/#style_formats https://www.tinymce.com/docs/configure/content-formatting/#style_formats_autohide https://www.tinymce.com/docs/configure/content-formatting/#style_formats_merge

也就是说，如果我将 style_formats 设置放在干净的 TinyMCE 实例中，我不会在格式 select 列表中获得任何其他选项：

http://fiddle.tinymce.com/0ggaab

Answer 2

是同样的问题，注释行 // extended_valid_elements: "span", 并且有帮助

Answer 3

除了 Michael Fromin 的回答外，我还想补充一下：

如果使用importcss插件除了使用style_formats，还需要添加参数：

importcss_append: 真

示例：

tinymce.init({ 
    selector:'textarea',
    //some custom styles to add to the Formats dropdown:
    style_formats: [
        { title: 'Bold text', inline: 'strong' },
        { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } }
    ],

    //Using an external CSS file in addition to custom formats:
    content_css: "my.css",

    plugins: [
    "importcss" //if using the importcss plugin also
    ],
    importcss_append: true //make sure you add this
});

TinyMCE 4 style_formats 不工作

TinyMCE 4 style_formats not working

styles

tinymce

tinymce-4