如何在TinyMCE中应用类而不是内联css样式

我正在使用

advimage

TinyMCE

插件

当我打开“高级图像”对话框，并选择向左对齐图像时，它会将

style=“float:left”

添加到图像标记中

但是，当我清理输出时，我正在从所有标记中删除

style

属性

默认情况下，有没有办法让

TinyMCE

添加类而不是内联css代码

例如，而不是：

style="float:left"

我想补充一点：

class="float-left"

---

使用

tinymce.init（）

设置tinymce时，在名为

content\u css

的参数中有in选项。您可以使用它向tinymce添加css文件

您还必须确保按钮列表中有

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"

    });

---

除了使用

content\u css

“style”下拉列表（通常加载了许多您从未使用或呈现给典型编辑器的css类）之外，还有一个自定义格式选项，它提供了对应用哪些类以及可以应用哪些类的精细控制，您还可以覆盖默认的TinyMCE格式：

例如：

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

---

这不会影响TinyMCE使用左对齐|右对齐|中间按钮添加内联样式，或添加内联样式的任何其他功能，如字体大小、字体系列等。@Madmartigan:不-它只会让您能够从工具栏中的样式下拉列表中添加类。它还将对html中的内容应用任何样式。顺便说一句，把手很酷，我喜欢柳树@Madmartigan没错，我想知道TinyMCE是否有可能。我认为这是一个常见的问题…@Deb，Madmartigan：我可能遗漏了一些东西，但是使用对齐按钮、字体系列等添加的任何内联样式都会覆盖外部css。带或不带tinymce。当然，标题或p标记之类的任何内容都将符合样式表中设置的样式，除非它们也被修改过。我正在从任何用户输入中删除样式属性，正如我在问题中提到的，这不适用于advimage插件，但适用于其他按钮，例如段落对齐。+1这种方法需要注意的一点是，图像（或任何有问题的元素）不能应用

mceNonEditable

类名。由于该类名被神奇地从显示给用户的方式中删除，它似乎破坏了tinymce替换类名的能力。因此，不是从

class=“mceNonEditable left”

切换到

class=“mceNonEditable right”

而是得到

class=“mceNonEditable left right”

。以防万一它能帮助其他人。