U4-3198 - HTML is cleaned twice - TinyMCE valid elements and TidyNet.Net

Created by Laurence Gillian 18 Oct 2013, 11:16:55 Updated by Laurence Gillian 22 Oct 2013, 09:12:40

When a content editor hits save, the data inside the richtext editor is processed to ensure it is valid. Due to a two step process, it seems some valid tags are not allowed with TidyEditorContent is set to true.

From reading the code, I believe the process flows like this:

  • Parse elements through TinyMCE's [|https://github.com/umbraco/Umbraco-CMS/blob/3bb61294e9ab55eddb6f9c6202663e4a0184988b/src/Umbraco.Web.UI/config/tinyMceConfig.config#L224]
  • If [|https://github.com/umbraco/Umbraco-CMS/blob/3bb61294e9ab55eddb6f9c6202663e4a0184988b/src/Umbraco.Web.UI/config/umbracoSettings.config#L52] equals True, then pass the parsed elements into the 'Tidy' class.

This works nicely, until adding support for a custom element or fix the broken handling on an existing element.

I expected to be able to add a new element to the TinyMceConfig property, however, if TidyNet.Net is not aware of this new element, it will return [tidy error], effectivly deleting all the posted content.

You can test this by adding ',+umbraco[*]' to the TinyMceConfig.config

  1. TinyMCE allows the element
  2. TidyNet.Net doesn't understand the element
  3. [tidy error|https://github.com/umbraco/Umbraco-CMS/blob/3bb61294e9ab55eddb6f9c6202663e4a0184988b/src/umbraco.cms/helpers/xhtml.cs#L66];

To solve this issue, would require TidyNet.Net to understand the contents of .

Disabling is not really an option, because it completely changes the 'known' behaviour of how the TinyMCE data is processed. (suddenly everything is wrapped in p tags)

A real world example of this is for the

  • 10.

    The only successful tag, is number 9.

    Most content editors, would want to create an iframe in the following format.

    No adjustment of the would allow this to be valid. This is because TidyNet.Net believes a non self closing element should not exist.

    My proposed solution, would be to make aware of TinyMce's .

    /src/umbraco.editorControls/tinyMCE3/TinyMCE.cs /src/umbraco.cms/helpers/xhtml.cs

    /config/umbracoSettings.config /config/tinyMceConfig.config

    Comments

    Sebastiaan Janssen 18 Oct 2013, 11:48:07

    Could you explain: "it completely changes the 'known' behaviour of how the TinyMCE data is processed. (suddenly everything is wrapped in p tags)"?

    So I guess instead of br's you suddenly get p's? Not sure if that's a side-effect of disabling tidy but you can configure that: http://www.tinymce.com/wiki.php/Configuration3x:force_br_newlines

    So in tinyMce.config: true false


    Sebastiaan Janssen 18 Oct 2013, 11:51:05

    And as I already said: the umbraco embed plugin in TinyMCE allows your editors to just copy/paste a youtube url so they don't need to know about iframes at all! :-)


    Sebastiaan Janssen 18 Oct 2013, 12:29:24

    Update to the above:

    raw GoogleSpellChecker.ashx true false false

    Use the embed plugin but don''t enter the youtube URL, paste the iframe there (as you requested without width and height) and voilá!


    Laurence Gillian 22 Oct 2013, 09:12:40

    Thanks :) That is working nicely.


    Priority: Normal

    Type: Bug

    State: Closed

    Assignee:

    Difficulty: Normal

    Category: Editor

    Backwards Compatible: True

    Fix Submitted:

    Affected versions: 4.11.10

    Due in version:

    Sprint:

    Story Points:

    Cycle: