TinyMCE 多个 CSS 类

Question

我一直在寻找一种方法来做到这一点。我有一个加载到 TinyMCE 的样式表。样式表是通过我的基于事件模板的内容管理系统生成的。问题是我无法让 TinyMCE 让我为一个单元素选择多个 CSS 类。下面是一个例子:

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

现在我知道我可以进去做类似的事情:

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

现在看到加载到 TinyMCE 的这个样式表是基于 CMS 的事件模板生成的。如果我要更改模板，我也必须更改样式代码。这将是 future 的一大麻烦。

所以有人知道样式选择器或插件的代码补丁可以让我这样做吗？

Answer 1

请参阅下面对多个 css 文件使用 content_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']**
 });