如何在TinyMCE中應用類而不是嵌入式css樣式

Question

我正在使用advimageTinyMCE插件。

當我打開高級圖像對話框，並選擇向左對齊圖像時，它會將style="float:left"添加到圖像標記。

但是，當我清理輸出時，我將從所有標記中刪除style屬性。

默認情況下，有沒有方法讓TinyMCE添加類，而不是內聯css代碼？

，而不是例如：

style="float:left" 

我想有加：

class="float-left" 

Answer 1

除了使用content_css「樣式」下拉列表中，這通常裝有很多你從來沒有使用或存在典型的編輯CSS類的，還有這給非常細粒度的自定義格式選項控制哪些類應用，他們可以應用到，你也可以覆蓋默認的TinyMCE的格式：

http://tinymce.moxiecode.com/wiki.php/Configuration:formats

例子：

tinyMCE.init({ 
    formats : { 
     alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'}, 
     aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'}, 
     alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'}, 
    } 
}); 

Answer 2

當設置了TinyMCE的使用tinyMCE.init()有在叫content_css的參數選項。你可以用它來添加一個css文件到tinymce。

您還必須確保在按鈕列表中有styleselect選項。

下面是一個示例設置：我對格式化表示歉意，我剛剛複製粘貼，我沒有時間開始分割字符串。

tinyMCE.init({ 
     // General options 
     mode: "exact", 
     elements: "textarea", 
     theme: "advanced", 
     plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist,insertcode", 
     convert_urls: false, 
     width: "621", 

     // Theme options 
     theme_advanced_buttons1: "fullscreen,code,|,cut,copy,paste,pastetext,pasteword,|,undo,redo,|,bold,italic,underline,strikethrough,|,blockquote,sub,sup,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,outdent,indent", 
     theme_advanced_buttons2: "link,unlink,removeformat,cleanup,charmap,emotions,|,styleselect,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor,insertcode,template", 
     theme_advanced_buttons3: "", 
     theme_advanced_toolbar_location: "top", 
     theme_advanced_toolbar_align: "left", 
     theme_advanced_statusbar_location: "bottom", 
     theme_advanced_resizing: true, 
     theme_advanced_resize_horizontal: false, 
     tab_focus: ":prev,:next", 
     extended_valid_elements: "textarea[cols|rows|disabled|name|readonly|class]", 

     // Example content CSS (should be your site CSS) 
     content_css: "/CSS/main.css" 

    });