2

I've looked at all the current configuration options and I still can't figure it out. I just want the style tag to be appended to the selected element and not have an additional span generated. So this:

<p>Hello World!</p>

should become this:

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

but TinyMCE 4 generates:

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

There was an option in TinyMCE < 3.4 called merge_styles_invalid_parents which leads me to believe that the spans were only generated for when the parent was in this list. Why do they seem to be generated for all styles now? Is this the default action, or is it possible my settings have something to do with it? Here's my list of defaults for all my editors just in case it proves useful:

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

Any help would be appreciated. Thanks in advance.

1
  • I have similar problem. I was wondering if you found a solution for this?
    – Strategist
    Nov 30, 2017 at 23:46

1 Answer 1

0

Try this: It will remove span on items without a class

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

UPDATE:

Try selecting the paragraph and click on remove formatting

2
  • No go. This just strips the spans completely, along with their styles. When I save the content, it reverts back to the style-less version.
    – ahamilton9
    Aug 15, 2014 at 17:23
  • Does it do it in Firefox too? Aug 15, 2014 at 19:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.