Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Tulika 7 posts 50 karma points
    Jun 07, 2011 @ 17:20
    Tulika
    0

    <p> tag getting added to inline macro

    I am using umbraco 4.7. I have created a razor macro to insert telephone number in my rich text editor. Whenever i add the macro in the RTE, <p> tags are added around the macro automatically. I tried removing the extra <p> tags by editing the html but as soon as I click on save, the <p> tags are added again. I tried installing this package

    but it didn't solve my problem. I have tried setting the <TidyEditorContent>False</TidyEditorContent> and checking the forced_root_block : 'p' but none of these could solve the problem.

    Any pointers to solve this issue?

  • Eran Meir 401 posts 543 karma points
    Jun 07, 2011 @ 22:51
    Eran Meir
    0

    what about using textbox multiple?

  • Tulika 7 posts 50 karma points
    Jun 08, 2011 @ 11:09
    Tulika
    0

    I need to have rich text box editor only.

  • Eran Meir 401 posts 543 karma points
    Jun 08, 2011 @ 11:22
  • Tulika 7 posts 50 karma points
    Jun 08, 2011 @ 13:21
    Tulika
    0

    The macro is written using razor syntax. Can you please explain in detail how to use this? I want to remove the extra <p> tags getting added in the html of RTE after adding the razor macro.

  • Eran Meir 401 posts 543 karma points
    Jun 08, 2011 @ 13:31
  • Tulika 7 posts 50 karma points
    Jun 08, 2011 @ 15:18
    Tulika
    0

    I am sorry to say that this is not what I am looking for.

    The problem is as below -

    The html before i add macro is
    <p>Sample text.</p>


    After adding the macro between text and . it becomes
    <p>Sample text</p>
    <div class="umbMacroHolder" title="This is rendered content from macro" onresizestart="return false;" umbpageid="1070" umbversionid="eb49d4f1-e7c4-4081-a8e7-464f7e2e77c7" ismacro="true" umb_macroalias="InsertTextTelephoneNumber"><!-- startUmbMacro -->1234567<!-- endUmbMacro --></div>
    <p>.</p>

    It closes the <p> tag and then inserts a div tag to render the macro and then adds one more <p> tag to render the content after the macro.
    This screws up the layout of the page. Any suggesstions on how to fix this issue?

     

  • Eran Meir 401 posts 543 karma points
    Jun 08, 2011 @ 17:50
    Eran Meir
    0

    ok, i got it.

    seems like you're not the only one who's having this problem http://umbraco.codeplex.com/workitem/21883

    Edit: oh i'm sorry this is closed. i have no idea how to solve it. maybe someone else does.

  • James Patterson 53 posts 192 karma points
    Jun 09, 2011 @ 16:12
    James Patterson
    0

    I think I see what you want to do here, your macro is rendering a phone number which you want to be within a paragraph you have created within the editor. This paragraph then gets split in two because of Umbraco using a DIV as the macro placeholder.

    TinyMCE is pretty good at keeping markup valid so I doubt you will be able to do anything about this. The 'problem' is that the macro placeholder is a DIV, and obviously you cannot have DIV tags within a paragraph tag, TinyMCE knows this and changes it. If you could stop TinyMCE 'fixing' your XHTML completely you'll be allowed to put DIV tags within P tags - which is invalid markup so I really don't think you can do that.

    My suggestion would be to think about your macro and change it to output the whole paragraph instead.

  • Tulika 7 posts 50 karma points
    Jun 09, 2011 @ 16:32
    Tulika
    0

    Anything from the macro is rendered inside a div. So even if i render the telephone number in a paragraph tag, it will be inside div tag only :(

    Can I change the way a macro is rendered? I mean then i can choose not to render the macro inside a div and may be inside a span tag so that my layout is preserved.

  • James Patterson 53 posts 192 karma points
    Jun 09, 2011 @ 16:56
    James Patterson
    0

    Overriding the fact it renders the macro content within a DIV would be an Umbraco source change. I just looked at the source myself and beleive I found where it creates the HTML to be placed within the TinyMCE editor and the DIV is nicely hard coded in there.

    I just created a XSLT, Razor and User Control macro and none of them display within a DIV when looking at the published page. Even just plain text dispays as I would expect, no additional tags. It's only in the TinyMCE editor, then Umbraco parses the content and replaces each placeholder DIV with the coresponding macro.

    I really don't think you'll find a solution without changing the Umbraco source and recompiling.

  • Rob Watkins 343 posts 593 karma points
    Mar 16, 2012 @ 12:07
    Rob Watkins
    0

    I'm sure this is long past any use to you, but maybe it will help someone else:

    I just ran into this problem myself for a web app that allows people to work on projects. The currently active project is maintained in Session variables, and I'd like to be able to use information about it, such as the name, in text fields so the website editors can change the content easily.

    I first looked at this: http://www.mortenbock.dk/blog/2011/07/28/using-inline-macros-in-the-umbraco-editor.aspx

    ...which looks like it would do the trick, but it's pretty longwinded - having to create a snippet file and modify the TinyMCE config for every field you want to use - I may end up with quite a few pieces of information I want to use, so it would get unwieldy quickly.

    So, I came up with a filthy hack. It works fine, however, I'm not sure what the performance would be like on high traffic sites, and more importantly, it reminds me of Wordpress *shudder*, but here it is anyway.

    1. Create a custom XSLT extension library for your project - I had one of these anyway, so not a problem
    2. Add the library into XsltExtensions.config so Umbraco knows about it
    3. Add to that library an extension method (I called mine Populate) for globally replacing template variables in a string - you can choose whatever format you like, I went for {{AppName.FieldToReplaceName}}; so in my case, the method goes through a string replacing fields like that with the appropriate data from the current project, loaded from the current Session.
    4. Now, the hacky bit: in your templates, whenever you use text that might want template variables, change the item reference to the following:
    <umbraco:Item field="bodyText"  xsltDisableEscaping="true" xslt="MyCustomLibrary:Populate({0})" runat="server"></umbraco:Item>
    

    The important bits are the xslt attribute, which passes everything to your custom replace function, and the xsltDisableEscaping, which allows rich text content to be displayed correctly.

    Then, in the Content, the editor can write things like "You are currently working on {{MyProjects.CurrentProjectName}}, exciting, isn't it?!" and you'll get your custom fields. 

    As an obvious extension idea you could optionally pass a classname like {{MyProjects.CurrentProjectName:project_name}} and change your replace function to generate something like <span class="project_name">My project</span>

    Here's a simple template substitution function that does that:

    // ==========================================================================================================================================================
    [Flags]
    public enum TemplateOptions { None = 0, DoubleEscapedFields = 1, LeaveUnmatchedFields = 2 }
    
    // ==========================================================================================================================================================
    public static String PopulateTemplate(String template, IDictionary<String, String> vars, TemplateOptions options)
    {
        bool doubleescapedfields = (options & TemplateOptions.DoubleEscapedFields) > 0;
        bool leaveunmatchedfields = (options & TemplateOptions.LeaveUnmatchedFields) > 0;
    
        String start = doubleescapedfields ? "{{" : "{";
        String end = doubleescapedfields ? "}}" : "}";
    
        return Regex.Replace(template, start + @"([a-zA-Z0-9_\.]+):?([a-zA-Z0-9_\.#\-]*)" + end,
            delegate(Match m)
            {
                String val = vars.ContainsKey(m.Groups[1].Value) ? vars[m.Groups[1].Value] : (leaveunmatchedfields ? m.Value : "");
                String cls = m.Groups[2].Value;
    
                if (cls != "")
                    val = "<span class=\"" + cls + "\">" + val + "</span>";
    
                return val;
            }
        );
    }

    If you are wondering why the options, it's modified from the one I am actually using to simplify it and make it more useful to my above suggestion; originally I was using single curly brackets for very simple templates, but I added the double brackets for use with HTML emails so CSS rules didn't confuse it.

  • Rob Watkins 343 posts 593 karma points
    Mar 16, 2012 @ 12:10
    Rob Watkins
    0

    To avoid confusion, the above function is just a common template filling function - the XSLT extension function in the custom library looks like this:

    public static String Populate(String s)
    {
        Dictionary d = new Dictionary();
    
        // Get applicable variables
        //d.Add("{MyProjects.CurrentProjectName", MyApp.CurrentProjectName);
        // ...
        //
    
        return Common.PopulateTemplate(s, d, TemplateOptions.DoubleEscapedFields);
    }
    
  • Bipin Kataria 25 posts 55 karma points
    Dec 27, 2014 @ 06:11
    Bipin Kataria
    1

    You guys can easly do it using TinyMCE settings.

    1. Go to "tinyMceConfig.config" file under "config" folder.
    2. Search for or go to "<customConfig>" section.
    3. Add new line as: <config key="forced_root_block"></config>

    This will not generate <p> tag in CMS Editor. So, you can write your content as you like. :) If you want to change it to something else then change it accordingly. For e.g. If you want to use <div> tag then change it to: <config key="forced_root_block">div</config>

    Thanks,
    Bipin

  • Jayjay 1 post 71 karma points
    Sep 14, 2016 @ 00:00
    Jayjay
    0

    Not trying to resurrect an old thread but this helped me! and I don't see anyone confirming that it worked for them.

  • BJ Patel 69 posts 174 karma points
    Apr 17, 2017 @ 10:38
    BJ Patel
    0

    None work for me.

    So while rendering the content I have removed the First Paragraph Tag

    As following is the razor code for the same

    @Html.Raw(library.RemoveFirstParagraphTag(Model.textOnHeader.ToString()))
    

    or can also go with following code.

    @Html.Raw(library.RemoveParagraphTags(Model.bodyText.ToString()))
    

    Regards.,

    BJ Patel.

  • Echo Train 16 posts 106 karma points
    Nov 08, 2017 @ 22:49
    Echo Train
    0

    I have a rich text editor in a content gird, and am experiencing this same issue. Bipin Kataria's solution worked to the extent it removed paragraph tags, but other tags (such as strong) will still appear. The RTE functionality is lost, replacing the desired formatting with tags.

  • Bipin Kataria 25 posts 55 karma points
    Nov 09, 2017 @ 03:15
    Bipin Kataria
    0

    Echo, if you are using v6.x or above, then try using "Umbraco.StripHtml" method in your View to strip off all the tags. If you don't want that then you can always update "tinyMceConfig.config" to change validElements / invalidElements tags. That will help you strip off elements from Rich Textbox.

  • Echo Train 16 posts 106 karma points
    Nov 10, 2017 @ 17:36
    Echo Train
    0

    What I don't understand is how to get the benefit of the RTE in that scenario. As I understand the result of stripping tags, this makes the RTE just an overly complicated textarea.

    From what I can see by viewing the source, the tags are represented with entities (< and so forth) and so get rendered as text, not interpreted as HTML.

  • Echo Train 16 posts 106 karma points
    Nov 16, 2017 @ 22:38
    Echo Train
    0

    I don't want them stripped, I want them in the generated HTML rather than rendered in the content. As it is, viewing the source shows them as &xx; type entities. It seems to me by stripping the tags, I only wind up with an unnecessarily complex textarea.

Please Sign in or register to post replies

Write your reply to:

Draft