Question

我一直在寻找一种方法来做到这一点。我有一个加载到TinyMCE的样式表。样式表是通过我的基于活动模板的内容管理系统生成的。问题是我不能让TinyMCE让我选择多个CSS类到一个signle元素。这是一个例子：

.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的活动模板生成的。如果我要更改模板，我还必须更改样式代码。这将成为未来的一大麻烦。

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

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

Answer 2

基于名称classes - 是复数以及其他配置设置示例语法，我认为它应该看起来像这样：

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

TinyMCE多个CSS类

2 个答案: