TinyMCE nested lists produce invalid HTML (ul child of ul)

Steps to reproduce:

• Start with the fiddle https://jsfiddle.net/cayy8tvk/
• Click “Bullet list” toolbar icon
• Enter “foo”, hit enter
• Click “Increase indent” toolbar icon twice
• Using the browser’s Inspector, inspect the last bullet point

The HTML will look something like:

<ul><li>foo<br data-mce-bogus="1"></li><ul><ul><li><br data-mce-bogus="1"></li></ul></ul></ul>

Notice the <ul><ul>. This is invalid HTML. You can verify this by using the W3C HTML5 validator which reports:

Error: Element ul not allowed as child of element ul in this context.

Additionally, this can be verified by the HTML5 spec which lists ul’s possible children as li only.

---

I think I understand why TinyMCE wants to do this, to avoid double bullet points with an additional li tag.

The issue I’m hitting, all content created by TinyMCE client side is validated and cleansed server side. One aspect of this cleansing is to transform any invalid HTML to valid HTML. The tag sequence <ul><ul><li> is converted to the valid <ul><li><ul><li> which, when rendered as plain HTML, has an extra bullet point.

I think an alternative solution to injecting invalid HTML would be to add style="list-style-type:none to empty <li> tag. What do you think?

[MichaelFromin]

I believe that if you load the lists plugin this will cease to happen.

[anatidaephobia]

Try this in your list of init params:

setup: function (editor) {

    editor.on('PostProcess', function(editor) {  // remove duplicated ul and ol elements 

        editor.content = editor.content.replace(/<ul(.*?)>[\s]*<ul(.*?)>/gi,'<ul'+'$1'+'>');

        editor.content = editor.content.replace(/<\/ul>[\s]*<\/ul>/gi,'</ul>');

        editor.content = editor.content.replace(/<ol(.*?)>[\s]*<ol(.*?)>/gi,'<ol'+'$1'+'>');

        editor.content = editor.content.replace(/<\/ol>[\s]*<\/ol>/gi,'</ol>');

    });

}