Question

我正在使用advimage TinyMCE插件。

当我打开高级图像对话框并选择向右对齐图像时，它会将style="float:left"添加到图像标记。

但是，当我清理输出时，我将从所有标记中删除style属性。

默认情况下，有没有办法让TinyMCE添加类而不是内联css代码？

例如，而不是：

style="float:left"

我想补充一下：

class="float-left"

Answer 1

除了使用content_css“styles”下拉列表，它通常加载了许多你从未使用或呈现给典型编辑器的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.init()设置tinymce时，名为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"

    });

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

2 个答案: