inserting a macro into tinymce creates multiple unwanted p tags on subsequent edits - Using Umbraco 7

Stuart Mullinger 3 posts 73 karma points

Feb 22, 2016 @ 10:54

Inserting a macro into TinyMCE creates multiple unwanted <p> tags on subsequent edits.

Hi,

I'm having an issue when inserting macros into the TinyMCE. I've created an example to demonstrate. I enter a few paragraphs of text to see the following HTML.

<p>This is a test to see paragraph markers being inserted into the RTE.</p>
<p>This is a new paragraph (just one).</p>
<p>This is another paragraph. Below is a iframe macro.</p>
<p>This paragraph is below the iframe macro.</p>
<p>This is the last paragraph. I've only ever used one paragraph break at a time.</p>

If I now insert a macro (I've tried a couple of different ones) and "Save and publish", everything is still fine.

<p>This is a test to see paragraph markers being inserted into the RTE.</p>
<p>This is a new paragraph (just one).</p>
<p>This is another paragraph. Below is a iframe macro.</p>
<div class="umb-macro-holder mceNonEditable"><!-- <?UMBRACO_MACRO macroAlias="InsertPlainHTML" Script="&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/eZKaeyTs1n4&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;" /> --> <ins><iframe width="560" height="315" src="https://www.youtube.com/embed/eZKaeyTs1n4" frameborder="0" allowfullscreen=""></iframe></ins></div>
<p>This paragraph is below the iframe macro.</p>
<p>This is the last paragraph. I've only ever used one paragraph break at a time.</p>

However, if I change some of the surrounding text, sometimes it will be fine, but then all of a sudden it will insert multiple extra <p></p> tags all throughout the text. Producing:

<p>This is a test to see paragraph markers being inserted into the RTE.</p>
<p> </p>
<p> </p>
<p> </p>
<p>This is a new paragraph (just one).</p>
<p> </p>
<p> </p>
<p> </p>
<p>This is another paragraph. Below is a iframe macro.</p>
<p> </p>
<p> </p>
<p> </p>
<div class="umb-macro-holder mceNonEditable"><!-- <?UMBRACO_MACRO macroAlias="InsertPlainHTML" Script="&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/eZKaeyTs1n4&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;" /> --> <ins><iframe width="560" height="315" src="https://www.youtube.com/embed/eZKaeyTs1n4" frameborder="0" allowfullscreen=""></iframe></ins></div>
<p> </p>
<p> </p>
<p> </p>
<p>This paragraph is below the iframe macro.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>This is the last paragraph. I've only ever used one paragraph break at a time.</p>

I'm using Umbraco 7.3.0.

The macros are "MVC Partial view" macros, here's an example of the one used above but, as I say, it happens with any I've tried.

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@if (Model.MacroParameters["Script"] != null && !String.IsNullOrEmpty(Model.MacroParameters["Script"].ToString()))
{
    @Html.Raw(HttpUtility.HtmlDecode(Model.MacroParameters["Script"].ToString()))
}

Anyone seen anything similar and found a solution? I did try searching around, but could find nothing.

Thanks, Stuart.

Copy Link

Dan Diplo 1554 posts 6205 karma points MVP 6x c-trib

Feb 22, 2016 @ 13:11

Yeah, I've seen this issue in the last few releases of Umbraco.

The only way I've managed to get around with it is hooking an event into the ContentService.Saving event and then stripping all empty paragraph tags.

Here's the code that runs on saving (it assumes your content is in a property with alias of "bodyText").

/// <summary>
/// Strips empty paragraph tags from bodyText to work around an Umbraco RTE bug
/// </summary>
private void StripEmptyParagraphTagsOnBodyText(IContentService sender, Umbraco.Core.Events.SaveEventArgs<IContent> e)
{
    Regex StripEmptyParagraphsRegex = new Regex(@"<p>\s</p>");

    foreach (var content in e.SavedEntities.Where(c => c.HasProperty("bodyText")))
    {
        string bodyText = content.GetValue<string>("bodyText");

        if (!String.IsNullOrEmpty(bodyText))
        {
            bodyText = StripEmptyParagraphsRegex.Replace(bodyText, String.Empty);
            content.SetValue("bodyText", bodyText);
        }
    }
}

It's not ideal, but does work around this issue.

NB. There is an issue logged for this: http://issues.umbraco.org/issue/U4-4356

Copy Link

Dan Roddis 57 posts 241 karma points

Mar 10, 2016 @ 12:22

We're having the same issue, thank you for sharing your workaround Dan.

Copy Link

admiss 20 posts 100 karma points

Jul 28, 2016 @ 19:55

TinyMCE has some built in formats (such as <p> ) that you can override https://www.tinymce.com/docs/configure/content-formatting/

I've another problem I've 4 Macros to be rendered in the RTE. Everything is working fine, macro content is showing in the Grid, BUT the edited content can't be saved . When I make a change in the RTE, it's not saving.

TinyMice RTE's NoneEditable Plugin - or the Grid - is passing the "mceNonEditable "class to the macros.

<div class="umb-macro-holder mceNonEditable">

Wondering where to find & change it to "mceEditable" - or trying to figure out why is TinyMice passing mceNonEditable to Macros??

Copy Link

Mikkel Johansen 116 posts 292 karma points

May 05, 2017 @ 17:53

Seems like this is still happening i 7.5.13 :-(

Does any body know if 7.6.0 has fixed the problem?

Copy Link

is working on a reply...

Flag this post as spam?

Inserting a macro into TinyMCE creates multiple unwanted <p> tags on subsequent edits.