TinyMCE Adding Tags Everywhere

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:


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!

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.

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.

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 10 years, 11 months ago.]

Greetings,

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.

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

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.