2
votes

We are using latest TinyMCE version v 4.0.10

We need to load content_css and see a dropdown of styles in styleselect menu.

As per documentation of TinyMCE 4.x , we tried to implement this using importcss plugin.

But we are not able to see a dropdown of styles in styleselect menu.

Below is the code snippet for the same :

theme: "modern",

menubar : false,

statusbar: false,

plugins: [
"advlist autolink lists autoresize link image charmap print preview hr anchor",

"searchreplace wordcount visualblocks visualchars code fullscreen pagebreak",

"insertdatetime media nonbreaking save table contextmenu directionality",

"emoticons paste textcolor spellchecker template noneditable importcss"

],

contextmenu: "cut copy paste | image inserttable",

toolbar1: button1,

toolbar2: button2,


toolbar_items_size: 'small',


content_css: "/CSS/user.css",


style_formats: [{title: 'Example 1', inline: 'span', classes: 'example1'}],


importcss_append: true

Here button1, button2 gets value at run time which renders toolbar menu properly.

And below is the user.css :

body {
background-color: #FFFFFF;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;

}


td {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;

}


pre {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;

}


.example1 {
font-size: 14px;
font-weight: bold;

}


.example2 {
color: #FF0000;
font-size: 12px;
font-weight: bold;

}


.tablerow1 {
background-color: #BBBBBB;

}

What we are expecting is :

Classes example1, example2, tablerow1 should get loaded in styleselect/Formats drop down menu dynamically instead of hard coding (by defining them in style_formats config option)

Please let us know if we are missing anything.

Thanks in advance.

1

1 Answers

1
votes

The code looks fine to me. except fot the CSS file path. Try this

content_css: "CSS/user.css" instead of content_css: "/CSS/user.css"