TinyMCE plusieurs classes CSS

Question

Je cherchais un moyen de le faire. J'ai une feuille de style qui est chargée dans TinyMCE. La feuille de style est générée via mon système de gestion de contenu basé sur le modèle actif. Le problème est que je ne peux pas obtenir TinyMCE pour me laisser sélectionner plusieurs classes CSS à un élément signle. Voici un exemple:

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

Maintenant, je sais que je pourrais y aller et faire quelque chose comme:

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'}, 
    ] 
}); 

Maintenant, voyant que cette feuille de style chargé dans TinyMCE est généré en fonction du modèle actif de la CMS. Si je devais changer le modèle je devrais également changer le code de style. Ce qui sera un gros problème à l'avenir.

Donc, quelqu'un sait d'un patch de code pour le sélecteur de style ou le plugin qui me permettra de faire cela?

Answer 1

Basé sur le nom classes - être pluriel et aussi sur d'autres syntaxes exemple des paramètres de configuration, je crois qu'il devrait ressembler à ceci:

tinyMCE.init({ 
    style_formats : [ 
     {title : 'Style1', classes : {'left_round_thumb_small','round_border_black'} }, 
     {title : 'Style2', classes : {'center_round_thumb_small','round_border_blue'} }, 
    ] 
}); 

Answer 2

voir ci-dessous l'utilisation de content_css pour plusieurs fichiers css

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']** 
});