TinyMCE 4没有正确合并样式

TinyMCE 4 not merging styles properly

本文关键字:合并 样式 TinyMCE      更新时间:2023-09-26

我已经看了所有当前的配置选项,但我仍然不能弄清楚。我只是希望样式标签被附加到选定的元素,而不是有一个额外的span生成。所以这:

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

任何帮助都会很感激。提前感谢。

试试这个:它会在没有class

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

更新:

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