TinyMCE多個CSS類

我一直在尋找一種方法來做到這一點。我有一個加載到TinyMCE中的樣式表。樣式表是通過基於活動模板的我的內容管理系統生成的。問題是我無法讓TinyMCE讓我選擇多個CSS類到一個signle元素。這裏有一個例子：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的活動模板生成。如果我要更改模板，我還必須更改樣式代碼。這將是未來的一大麻煩。

因此，任何人都知道風格選擇器或插件的代碼補丁，可以讓我這樣做嗎？

來源

2013-07-17 Pyromanci

-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-19 12:09:24

如果你看。我指出我知道我可以這樣做，但是想避免這樣做。並使用核心CSS選擇器。無論哪種方式，我寫了一個使用content_css值的插件。所以我不必爲每個模板更改做這些更改。 – Pyromanci

Pyromanci，即時通訊在同樣的問題下，你能幫我插件的東西嗎？ – msqar

https://www.dropbox.com/s/we9mjqajicmxqxs/multistyleselector.rar?dl=0解包並上傳到您的TinyMCE插件目錄。然後將multistyleselector添加到您的插件列表和一個按鈕行中。您可能需要使用它，甚至可能無法使用代碼，因爲它是爲我的CMS專門編寫的。所以它可能不適用於你的內容。 – Pyromanci

見下文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-26 19:28:24 alex

TinyMCE多個CSS類

回答

相關問題