Tinymce inserting span in list tags

I have text in the tinymce editor inside the <p> tags, nothing else, no classes, no styles. When I select the text and click the "Unordered list" button, then <p> will become a list. But each <li> looks like this:

<li><span style="font-size: 12px; line-height: 1.5em;">Some text...</span></li>

Where do these styles come from, what tinymce configuration option, which file, which ??? I want the List button to simply add html list tags without any spaces or styles.

Here is my tinymce configuration. The configuration is copied directly from the Chrome inspector (therefore, there are no attachments in the attached details): (the breakpoint was on line 13547, in the expression tinymce.add(t); in tiny_mce_src.js)

 settings: Object accessibility_focus: true accessibility_warnings: false add_form_submit_trigger: true add_unload_trigger: true apply_source_formatting: 0 bodyClass: "wysiwygeditor" button_tile_map: true content_css: "/sites/all/themes/adaptivetheme/at_core/css/at.layout.css,/sites/all/themes/atsl/css/global.base.css,/sites/all/themes/mytheme/css/global.styles.css convert_fonts_to_spans: 1 convert_urls: false delta_height: 0 delta_width: 0 dialog_type: "modal" directionality: "ltr" doctype: "<!DOCTYPE>" document_base_url: "/" entities: "quot,apos,amp,lt,gt,nbsp,iexcl" entity_encoding: "named" extended_valid_elements: "" fix_table_elements: true font_size_legacy_values: "xx-small,small,medium,large,x-large,xx-large,300%" font_size_style_values: "xx-small,x-small,small,medium,large,x-large,xx-large" forced_root_block: "p" formats: Object hidden_input: true id: "edit-body-und-0-value" ie7_compat: true indent: "simple" indent_after: "p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,ul,li,area,table,thead,tfoot,tbody,tr,section,article,hgroup,aside,figure,option,optgroup,datalist" indent_before: "p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,ul,li,area,table,thead,tfoot,tbody,tr,section,article,hgroup,aside,figure,option,optgroup,datalist" indentation: "30px" inline_styles: true language: "en" mode: "none" object_resizing: true padd_empty_editor: true paste_auto_cleanup_on_paste: 0 plugins: "style,-codemagic" popup_css: "" preformatted: 1 relative_urls: true remove_linebreaks: 1 remove_script_host: true render_ui: true skin: "thebigreason" strict_loading_mode: true style_formats: Object submit_patch: true table_inline_editing: false table_styles: Array[0] theme: "advanced" theme_advanced_blockformats: "p,h3,h4" theme_advanced_buttons1: "bold,italic,underline,justifyleft,justifycenter,justifyright,separator,bullist,numlist,indent,outdent" theme_advanced_buttons2: "link,image,media,charmap,blockquote,separator,formatselect,removeformat,styleselect,codemagic" theme_advanced_buttons3: "" theme_advanced_resize_horizontal: 0 theme_advanced_resizing: 1 theme_advanced_resizing_use_cookie: false theme_advanced_statusbar_location: "bottom" theme_advanced_toolbar_align: "left" theme_advanced_toolbar_location: "top" url_converter: function (url, name, elm) { url_converter_scope: tinymce.create.Editor validate: true verify_html: true visual: true width: "100%" 

Where the "formats" are as follows:

 formats: Object aligncenter: Object classes: "align-center" selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img" __proto__: Object alignleft: Object classes: "align-left" selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img" __proto__: Object alignright: Object classes: "align-right" selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img" __proto__: Object forecolor: Object classes: "forecolor" inline: "span" styles: Object __proto__: Object hilitecolor: Object classes: "hilitecolor" inline: "span" styles: Object __proto__: Object strikethrough: Object inline: "line-through" __proto__: Object underline: Object classes: "underline" exact: true inline: "span" __proto__: Object __proto__: Object 

"Style Formats" are as follows:

 style_formats: Object blink: Object attributes: Object class: "blink" __proto__: Object inline: "span" title: "Blink" __proto__: Object __proto__: Object 
+6
source share
2 answers

My tinymce configuration didn’t have the “plugins” setting compared to http://fiddle.tinymce.com. When I added the “plugins” option, tinymce no longer inserts style gaps into lists.

Some additional information that led me to a solution:

line 14212 tiny_mce_src.js returned false when debugging on my website (when creating a list) - and returns true in the tinymce script. ( if (o = t.execCommands[cmd]) {..... )

somehow on my site tinymce executed line 15063 ( execNativeCommand function), but it wasn’t on the tinymce fiddle (perhaps the result of missing plugins)

The native Chrome execCommand has problems inserting stylized spans, as described here: http://help.dottoro.com/ljcvtcaw.php , and I also created a fiddle to confirm this: http://jsfiddle.net/fUsmx/ (close and open the inspector again to see the result)

+3
source

Looks like I found a solution to your problem: http://martinsikora.com/how-to-make-tinymce-to-output-clean-html

The key is to use extended_valid_elements . This will delete all spans without a class attribute.

 extended_valid_elements : "span[!class]" 
+6
source

All Articles