We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 36656
    • 21 Posts
    I'm building a site in the current version of ModX Revo (2.2.6) and using and using TinyMCE 4.3.3.

    I'm having some trouble with TinyMCE adding <span> tags all over the place. For instance, after making some text into a bulleted list it looks like this:
    <li><span style="line-height: 1.5em;">Item 1</span></li>
    <li><span style="line-height: 1.5em;">Item 2</span></li>
    <li><span style="line-height: 1.5em;">Item 3</span></li>
    <li><span style="line-height: 1.5em;">Item 4 </span></li>
    <li><span style="line-height: 1.5em;">Item 5</span></li>

    I'm not too familiar with configuring TinyMCE. Is there a way I can stop it from adding all of this extra stuff? Thank you!
      • 5430
      • 247 Posts
      This is often VERY browser specific, it may have nothing at all to do with tinyMCE. Firefox and Safari have been the most consistent for me, especially Safari (I'm not a Safari fan, but it gets along well with tinyMCE for some reason). I've been getting stuff like this when using Chrome.
        • 5430
        • 247 Posts
        Let me rephrase, it, of course, has something to do with tinyMCE, but it may be easier simply to use a different browser than to try and fix it with tinyMCE config changes.
          • 39194
          • 149 Posts
          You can try CKEditor integration.
          • This is happening to me now in Chrome, only when creating lists. Doesn't happen in Firefox. Since Chrome is faster at the moment then other browsers in the backend I've recommended Chrome for the last couple of years so switching to another browser would cause anger in clients. So far it's not much of an issue anyway but it could become one.
            • Happening in WordPress as well: http://wordpress.stackexchange.com/questions/96520/html-added-to-editor-when-deleting-shortcodes-in-chrome-browser

              Couldn't find this file in MODX though.

              Found this post as well: http://stackoverflow.com/questions/14579916/tinymce-inserting-span-into-list-tags

              And this: http://www.tinymce.com/develop/bugtracker_view.php?id=5688

              So Chrome 24 + seems to have this issue. [ed. note: rx2 last edited this post 11 years ago.]
                • 36816
                • 109 Posts
                clareoconsulting Reply #7, 11 years ago

                I've been having the same problem with list items in Chrome since v24, and it's been driving me nuts.

                Based on some of the info in @rx2's supplied links, I tried an experiment. The following is what amounts to a work-around, and would very likely be overwritten in a MODX version upgrade, but may also help diagnostics toward a permanent fix.

                I'm seeing it in MODX 2.2.7, TinyMCE 4.3.3.

                1. In Manager, go to System Settings & filter for TinyMCE settings
                2. Lookup the Editor Theme and TinyMCE Skin settings
                3. Find the related TinyMCE theme CSS file named content.css. It should be assets/components/tinymce/jscripts/tiny_mce/themes/[your_editor_theme_setting]/skins/[your_tinymce_skin_setting]/
                4. Save a copy of the file
                5. Tinker with the settings of the body element. In my case, (using the advanced theme/circuit skin), I solved the above by changing the font size definition to remove the line-height, i.e. 12px/1.5em becomes 12px

                Worked for me. No promises; your mileage may vary.

                Bug report http://tracker.modx.com/issues/9491 may be related; this 'fix' seems to solve that particular problem for me too.
                  • 38290
                  • 712 Posts
                  TinyMCE is more hassle than its worth, and does things a rich text editor never should do:
                  Bugger up your HTML tags.

                  modmore will be releasing a premium text editor soon. Sign up for the newsletter at modmore.com if you think you may be interested
                    • 36816
                    • 109 Posts
                    Quote from: clareoconsulting at May 28, 2013, 05:19 PM

                    I've been having the same problem with list items in Chrome since v24, and it's been driving me nuts.

                    This problem continues to irritate me, so every once in a while, I search, tinker and test possible solutions. Today, I found a StackOverflow post that pointed me in another direction.

                    Adding the TinyMCE plugin "lists" (http://www.tinymce.com/wiki.php/Plugin:lists) to the tiny.custom_plugins MODX system setting squashes the insertion of span elements on list elements in Chrome/Safari. TinyMCE indicates that the plugin normalizes list behavior among browsers.

                    Unfortunately, it does not do so for the test case reported in http://tracker.modx.com/issues/9491, although the CSS edit I proposed in my earlier post does.