javascript - TinyMCE 4 没有正确合并样式

Question

我已经查看了所有当前的配置选项，但仍然无法弄明白。我只想将样式标签附加到所选元素，而不生成额外的跨度。所以这个:

<p>Hello World!</p>

应该变成这样:

<p style="font-size: 18px;">Hello World!</p>

但是 TinyMCE 4 生成:

<p><span style="font-size: 18px;">Hello World!</span></p>

TinyMCE < 3.4 中有一个名为 merge_styles_invalid_parents 的选项，这让我相信只有当父级在此列表中时才会生成跨度。为什么它们现在似乎是为所有样式生成的？这是默认操作，还是我的设置可能与它有关？这是我所有编辑器的默认列表，以防它被证明有用:

var defaults = {
    plugins: "-fullscreen -code -paste -image -link -textcolor -anchor -table -hr -autoresize -contextmenu -upload -commonlinks",
    link_title: false,
    menubar: false,
    statusbar: false,
    skin_url: '../tinymce/skins/lightgray',
    contextmenu: "link inserttable | cell row column deletetable",
    content_css: "css, /tinymce/content-default.css?v=1",
    width: '100%',
    height: 20,
    autoresize_bottom_margin: 'auto',
    autoresize_min_height: 20,

    // Font families
    font_formats: "Arial = Arial, Helvetica Neue, Helvetica, sans-serif;" + // cssfontstack.com
                    "Courier New = Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;" +
                    "Georgia = Georgia, Times, Times New Roman, serif;" +
                    "Lucida Grande = Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;" +
                    "Tahoma = Tahoma, Verdana, Segoe, sans-serif;" +
                    "Times New Roman = TimesNewRoman, Times New Roman, Times, Baskerville, Georgia, serif;" +
                    "Trebuchet MS = Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;" +
                    "Verdana = Verdana, Geneva, sans-serif", // No semi-colon on last, or TinyMCE errors out

    // Formats
    style_formats: [
        {title: 'Headers', items: [
            {title: 'Heading 1', block: 'h1'},
            {title: 'Heading 2', block: 'h2'},
            {title: 'Heading 3', block: 'h3'},
            {title: 'Heading 4', block: 'h4'}
        ]},
        {title: 'Paragraph', block: 'p'},
        {title: 'Buttons', items: [
            {title: 'Default', selector: 'a', classes: 'btn btn-user'},
            {title: 'Blue', selector: 'a', classes: 'btn btn-primary'},
            {title: 'Yellow', selector: 'a', classes: 'btn btn-warning'},
            {title: 'Red', selector: 'a', classes: 'btn btn-danger'},
            {title: 'Lt. Blue', selector: 'a', classes: 'btn btn-info'}
        ]},
        {title: 'Vertical Align', items: [
            {title: 'Top', selector: '*', styles: {'vertical-align': 'top'}},
            {title: 'Middle', selector: '*', styles: {'vertical-align': 'middle'}},
            {title: 'Bottom', selector: '*', styles: {'vertical-align': 'bottom'}},
            {title: 'Text-Top', selector: '*', styles: {'vertical-align': 'text-top'}},
            {title: 'Text-Bottom', selector: '*', styles: {'vertical-align': 'text-bottom'}}
        ]},
        {title: 'Line Height', items: [
            {title: '1.0', selector: '*', styles: {'line-height': '1'}},
            {title: '1.2', selector: '*', styles: {'line-height': '1.2'}},
            {title: '1.4', selector: '*', styles: {'line-height': '1.4'}},
            {title: '1.5', selector: '*', styles: {'line-height': '1.5'}},
            {title: '1.6', selector: '*', styles: {'line-height': '1.6'}},
            {title: '1.8', selector: '*', styles: {'line-height': '1.8'}},
            {title: '2.0', selector: '*', styles: {'line-height': '2'}}
        ]}
    ],

    // Element Whitelist:
    // -                Tag will be removed if empty
    // =                Attribute will get the set default
    // +                Tag will be simplified if empty
    // @                These rules apply to all tags
    // [rule|rule2]     Attributes allowed on this tag
    // [rule<one?two]   Attribute can have only listed values
    // More info: // tinymce.com/wiki.php/Configuration:valid_elements
    valid_elements: "-@[style|class]," + // Global
                    "p,div,span,h1,h2,h3,h4,h5,h6," + // Core
                    "strong/b,em/i,sup,sub," + // Mod
                    "a[href|name|!target|target=_top|target<_blank?_top?_self]," + // Links
                    "+hr,+img[alt|title|src],br," + // Other
                    "table,thead,tbody,tr,th,td[colspan|rowspan]," + // Tables
                    "ul,ol,li", // Lists

    // Font Sizes
    fontsize_formats: "8px 10px 12px 14px 16px 18px 20px 24px 30px 36px 48px 72px",

    // Toolbars
    toolbar1: 'upload code | cut copy paste | link unlink anchor | table hr | bullist numlist | indent outdent | alignleft aligncenter alignright alignjustify', // tinymce.com/wiki.php/Configuration:toolbar
    toolbar2: 'bold italic underline | forecolor backcolor styleselect removeformat | fontselect fontsizeselect | rules facts',
}

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

试试这个:它将删除没有类的项目的跨度

<script type="text/javascript">
     tinymce.init({
     extended_valid_elements : "span[!class]"
 });
</script>

更新:

尝试选择段落并单击删除格式