TinyMCE multiple CSS classes - tinymce

Question

I’ve been looking for a way to do this. I have a style sheet that is loaded into TinyMCE. The style sheet is generated via my content management system based of the active template. Problem is I can not get TinyMCE to let me select multiple CSS classes to a signle element. Here is a example:
.left_round_thumb_small {
width:65px;
height:65px;
border-radius:35px;
-moz-border-radius:35px;
-webkit-border-radius:35px;
-khtml-border-radius:35px;
background:url(/skins/msc_2013/images/lines.png) repeat;
float:left;
margin:0 25px 0 0;
}
.center_round_thumb_large {
width:162px;
height:162px;
border-radius:85px;
-moz-border-radius:85px;
-webkit-border-radius:85px;
-khtml-border-radius:85px;
background:url(/skins/msc_2013/images/lines.png) repeat;
position:relative;
margin:0 25px 0 0;
}
.round_border_black {border:1px solid black;}
.round_border_red {border:1px solid red;}
.round_border_blue {border:1px solid #00aeef;}
.round_border_green {border:1px solid #3cb64b;}
Now I know I could go in and do something like:
tinyMCE.init({
style_formats : [
{title: 'Left Thumb Black', classes: 'left_round_thumb_small round_border_black'},
{title: 'Center Thumb Blue', classes: 'center_round_thumb_small round_border_blue'},
]
});
Now seeing that this style sheet loaded into TinyMCE is generated based of the CMS’s active template. If I were to change the template I would also have to change the style code. Which will be come a major hassle in the future.
So anyone knows of a code patch to the style selector or plugin that will let me do this?

Answer 1

see below usage of content_css for multiple css files
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
**content_css: [
'//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
'//www.tinymce.com/css/codepen.min.css']**
});

Answer 2

I know this is an old post, but here is what I do, in case someone else come looking.
style_formats: [
{
title: 'Button Styles', items: [
//{ title: 'Button Class (Must Select)', selector: 'a', classes: 'btn' },
{ title: 'Default Class', selector: 'a', classes: ['btn', 'btn-default'] },
{ title: 'Primary Class', selector: 'a', classes: ['btn', 'btn-primary'] },
{ title: 'Success Class', selector: 'a', classes: ['btn', 'btn-success'] },
{ title: 'Warning Class', selector: 'a', classes: ['btn', 'btn-warning'] },
{ title: 'Danger Class', selector: 'a', classes: ['btn', 'btn-danger'] },
{ title: 'Info Class', selector: 'a', classes: ['btn', 'btn-info'] },
{ title: 'Charcoal Class', selector: 'a', classes: ['btn', 'btn-charcoal'] },
{ title: 'Disabled Class', selector: 'a', classes: ['btn', 'btn disabled'] }]
}
]
As you can see, I wanted to include the 'btn' class with each of the Bootstrap button classes. All you have to do is wrap each class name in single-quotes, and separated each class name with a coma, then wrap all those class names in square brackets []
example: classes: ['btn','btn-default']
I hope this helps someone else.

Answer 3

Based on the name classes - being plural and also on other configuration setting example syntaxes, I would believe that it should look something like this:
tinyMCE.init({
style_formats : [
{title : 'Style1', classes : {'left_round_thumb_small','round_border_black'} },
{title : 'Style2', classes : {'center_round_thumb_small','round_border_blue'} },
]
});