4

我一直在寻找一种方法来做到这一点。我有一个加载到 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 的活动模板生成的。如果我要更改模板，我还必须更改样式代码。这将成为未来的主要麻烦。

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

4

2 回答 2

4

请参阅下面的 content_css 用于多个 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']**
 });
于 2016-01-26T19:28:24.353 回答
-1

基于名称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'} },
    ]
});
于 2013-07-19T12:09:24.160 回答