x First time here? Check out the FAQ

Come work for Umbraco - The Umbraco HQ are hiring Project managers, .NET developers and DevOps people!

  • Avatar139posts94karma

    Empty p tag when inserting macro into text editor

    Garry Bain started this topic January 6, 2010 @ 04:48

    Hi everyone,

    When I insert a macro I am getting an empty <p> tag around my content, and due to the nature of my macro - it's throwing a validation error which is really inconvenient :)

    Are there any solutions for preventing these paragraph tags (except manually deleting them of course)

    Thanks, Garry.


  • Avatar483posts899karma
    Comment with ID: 22643
    Laurence Gillian posted this reply January 6, 2010 @ 05:49

    I did think it was possible to change the way TinyMCE is configured to stop this happening. However after digging about a little this might not be the case.

    Have a look at;

    http://our.umbraco.org/forum/using/ui-questions/4224-Tinymce-adding-in-p-p-tags-before-and-after-inline-macros

    and

    http://forum.umbraco.org/yaf_postst6644_Insert-Macro-adds-a-paragraph-tag.aspx (old forum)


  • Avatar139posts94karma
    Comment with ID: 22644
    Garry Bain posted this reply January 6, 2010 @ 06:01

    Yeah I have read these posts today but the Jquery didnt work for me, also wanted to stop the problem at the root instead of overiding with, with JS that can be disabled by users anyway. Thanks for the help anyway!

    Garry.


  • Avatar483posts899karma
    Comment with ID: 22646
    Laurence Gillian posted this reply January 6, 2010 @ 06:04

    In what context are you inserting the macro?

    My personal view is its is incredibly rare that I would want a client to be able to insert a macro into a page. As this opens a whole host of opportunity for them to insert it in a bad position (from a design point of view) or end up with additional unneeded tags, etc.

    Laurie


  • Avatar483posts899karma
    Comment with ID: 22647
    Laurence Gillian posted this reply January 6, 2010 @ 06:04

    (i'd edit that, but I can't! but it wasn't supposed to be in Bold! more Italics, as a after thought!)


  • Avatar139posts94karma
    Comment with ID: 22826
    Garry Bain posted this reply January 8, 2010 @ 04:18

    Hi LaurenceG,

    I have setup a new tab for the client to insert a video - which is a macro from Simple Video Player package. So basically they choose a video and it inserts it via a macro - which is then held in the template to display on every page.

    I just need to get rid of these <p>&nbsp</p> that are forcing new lines and validation errors.

    Cheers.


  • Avatar483posts899karma
    Comment with ID: 22914
    Laurence Gillian posted this reply January 10, 2010 @ 05:14

    I'm not aware of this package. Could you not however just has a text string field on the video tab? If they user pastes in the location of the video then you pass this value into your packages code? (i'm assume its XSLT)

    Nice and simple XSLT test to see if there is anything in the field and some regex on the field to ensure its a valid URL (Starting with HTTP) and ending in which ever video file extensions you wish to support.

    /Laurie


  • Avatar139posts94karma
    Comment with ID: 22945
    Garry Bain posted this reply January 11, 2010 @ 10:08

    Hi Laurence,

    The video that user chooses will not be an external URL, it will be from the Media section so the package uses the "Media Picker" (I think it's called) to choose the video.

    Garry


  • Avatar483posts899karma
    Comment with ID: 22964
    Laurence Gillian posted this reply January 11, 2010 @ 12:26

    Just use a Content Picker datatype then to get the Node ID.

    Then have a look at the XSLT, identify where it gets the ID from (something like /marco/mediaID) and update that to get the value the set in the Content Picker data type (something like $currentPage/data [@alias = 'theAliasYouSet])

    /Lau


  • Avatar21posts82karma
    Comment with ID: 24566
    Martijn Maris posted this reply January 27, 2010 @ 07:51

    I'm also using macro's in the tinymce editor and found it very frustrating to see all the empty paragraph elements messing up the layout of the pages. For now I found a solution, more kind of a workaround.

    What you can do is hook up in the Document BeforeSave event and replace all the text that has empty paragraph tags:

        public class DocumentBeforeSaveHandler : umbraco.BusinessLogic.ApplicationBase
    {
    public DocumentBeforeSaveHandler()
    {
    Document.BeforeSave += new Document.SaveEventHandler(Document_BeforeSave);
    }

    void Document_BeforeSave(Document sender, umbraco.cms.businesslogic.SaveEventArgs e)
    {
    RemoveEmptyParagraphTags(sender);
    }

    #region Methods

    /// <summary>
    /// Remove the empty paragraph tags at the beginning and end of a text
    /// </summary>
    /// <param name="sender"></param>
    private void RemoveEmptyParagraphTags(Document sender)
    {
    foreach (Property property in sender.getProperties)
    {
    if (property.Value is string && !string.IsNullOrEmpty(property.Value.ToString()))
    {
    Regex regex = new Regex(@"<p[^>]*>(\s|&nbsp;?)*</p>");
    property.Value = regex.Replace(property.Value.ToString(), "");
    }
    }
    }

    #endregion
    }


    The only drawback of this solution is that you will still see paragraph tags in the html-editor of tinymce. Although sometimes. The content however will always be saved without the empty tags.


  • Avatar16posts425karma
    Comment with ID: 44520
    James Diacono posted this reply August 25, 2010 @ 03:55

    Hey Martijn,  I've been using your above code for a while but it isn't quite right - it fires on the BeforeSave, which is bad, because when you submit the updated content from tinymce, that also fired on beforesave, and they overwrite each other.  Instead, use AfterSave (just shove this block of code into your Global.asax.cs file):

    P.S...you'll need to remove that space in the "& nbsp;" in the regex, this editor renders a space if I put it as a literal

        public class UmbracoEvents : ApplicationBase
        {
            public UmbracoEvents()
            {
                umbraco.cms.businesslogic.web.Document.AfterSave += new umbraco.cms.businesslogic.web.Document.SaveEventHandler(RemoveEmptyParagraphTags);
            }
    
            /// 
            /// Remove the empty paragraph tags inserted into TinyMCE for no good reason.
            /// 
            /// The document which was just saved
            void RemoveEmptyParagraphTags(umbraco.cms.businesslogic.web.Document sender, umbraco.cms.businesslogic.SaveEventArgs e)
            {
                foreach (umbraco.cms.businesslogic.property.Property property in sender.GenericProperties)
                {
                    if (property.Value is string && !string.IsNullOrEmpty(property.Value.ToString()))
                    {
                        Regex regex = new Regex(@"<p[^>]*>(\s|& nbsp;)*</p>");
                        property.Value = regex.Replace(property.Value.ToString(), "");
                    }
                }
            }
        }

Pages:

Please login or Sign up To post replies