CODEWITHSUNDEEP
stylestinymcetinymce-4
nickornotto
nickornotto

Reputation: 2146

TinyMCE 4 style_formats not working

I am using version 4.7.4 of TinyMCE with my razor form

I have addes style_formats option and the relevant stylesheet but the custom formats are not appearing in the Formats dropdown, just default styles.

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;
}

In the formats dropdown I still have: Paragraph, 6 heading and Preformatted style.

Only 'Red' format should be available, shouldn't it?

Upvotes: 3

Views: 9421

Answers (3)

supershwa
supershwa

Reputation: 19

In addition to Michael Fromin's answer, I'd like to throw this in:

If using the importcss plugin in addition to using style_formats, you need to add the parameter:

importcss_append: true

Example:

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

Upvotes: 1

Andrey Ivanov
Andrey Ivanov

Reputation: 1

was the same problem, commentted line // extended_valid_elements: "span", and it helps

Upvotes: 0

Michael Fromin
Michael Fromin

Reputation: 13726

What you see in that list depends on a variety of settings:

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

That being said if I place that style_formats setting in a clean TinyMCE instance I don't get any of those other options in the Formats select list:

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

enter image description here

Upvotes: 3

Related Questions