TinyMCE turns <img /> into <img>

Question

Tinymce is removing my img closing tag and producing invalid xhtml.

It turns this

<img src="image.jpg" />

Into this

<img src="image.jpg" data-mce-src="/../Index/image.jpg">

I'm also using codemagic, but when viewing the html it still shows . I have also tried including <img></img>, but the output is the same.

Thoughts?

Here are my options

var tinyMceOptions = {
    mode: 'textareas',
    theme: 'advanced',
    element_format : "xhtml",
    plugins: 'codemagic,wordcount,inlinepopups,sparkimage, sparklink',
    theme_advanced_buttons1: 'formatselect,fontsizeselect,|, bold,italic,underline,|,bullist,numlist,|,outdent,indent,blockquote,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,|,sub,sup,|,sparklink,sparkimage,codemagic',
    theme_advanced_buttons2: '',
    theme_advanced_buttons3: '',
    theme_advanced_toolbar_location: 'top',
    theme_advanced_toolbar_align: 'left',
    theme_advanced_resizing: true,
    theme_advanced_statusbar_location: "bottom",
    valid_elements: "*[*]",
    //extended_valid_elements :"script[language<javascript|type|src]",
    skin: 'o2k7',
    width: '575px',
    height: '350px',
    forced_root_block : false,
    theme_advanced_blockformats: 'h1,h2,h3,h4,h5,h6,p',
    relative_urls : false,
    setup : function (ed) {
        ed.onChange.add(function (ed, evt) {
            var val = $('iframe#_contentAreaID_ifr').contents().find('body').html();
                $('._hiddenContentContainer[data-contentid=' + currentTab + '] ._hiddenContentArea').val(val);
            }
        );
    }
};

@Pekka The content needs to be valid xml since our CMS needs to parse through it and extract meta data on some elements. — Jerry
Can you not alter your parser to allow both <img> and <img/> — rlemon
@rlemon We're using c#'s XPathNavigator to parse the output of TinyMce, which is expecting valid xml. It would be a lot easier to figure out what setting is causing this in TinyMce. My other option is to check the TinyMce output before passing it to the XPathNavigator, but I really don't want to write something that has to parse (x)html myself. — Jerry

Naftali Naftali · Accepted Answer · 2012-12-26T16:03:50

That is an issue within TinyMCE code itself.

It was never meant to be used with XHTML -- and if you do want to use it with that, then you have to edit the core.

Here is an article that might highlight how to use strict XHTML with TinyMCE

TinyMCE turns <img /> into <img>

2 Answers