Multiple TinyMCE CSS Classes

Question

I was looking for a way to do this. I have a stylesheet loaded in TinyMCE. A stylesheet is created through my content management system based on the active template. The problem is that I cannot force TinyMCE to allow me to select multiple CSS classes for the signle element. Here is an 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 that I can 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, having seen that this stylesheet is loaded into TinyMCE, it is created based on the active CMS template. If I had to change the template, I would also have to change the style code. In the future, this will become a serious problem.

So does anyone know of a code patch for a style selector or a plugin that will allow me to do this?

Answer 1

see below using 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

Based on the classes name - the plural, as well as other syntaxes for the configuration example, I think 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'} }, ] });