Copied to clipboard

Flag this post as spam?

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


  • Brad 94 posts 151 karma points
    Feb 17, 2010 @ 07:20
    Brad
    0

    Adding HTML in the Rich Text editor

     

    Why does the Rich Text editor strip out divs?

    I have a simple div I'm using to add some space down the page between two paragraphs. .

    For example if i do this

    <p>Some text here</p>
    <div style="padding-bottom: 50px">&nbsp;</div>
    <p>This text should be 50 pixels down</p>

    When I hit Update and then the HTML button again, the div is still there.

    However if I hit Save and Publish, the DIV is stripped out and the html looks like this.

    <p>Some text here</p>

    <p>This text should be 50 pixels down</p>

    What is going on?

     

     

  • Jan Skovgaard 11242 posts 23390 karma points MVP 6x admin c-trib
    Feb 17, 2010 @ 08:49
    Jan Skovgaard
    0

    I thinks it's because of the tidy-implementation in tiny mce. I think it can be fixed somehow but I'm unfortunately not quite sure how-

    Tidy makes sure that the output HTML is clean but sometimes it's a bit strict.

    /Jan

  • Kim Andersen 1447 posts 2194 karma points MVP
    Feb 17, 2010 @ 08:55
    Kim Andersen
    1

    Hi Brad

    Somewhere in the TinyMCE files, you can specify which tags should be allowed in the editor, but I can't remember what file it can be specified in. I'll try to find out and return to you if I can find the right file.

    /Kim A

  • Chris Koiak 700 posts 2626 karma points
    Feb 17, 2010 @ 09:26
    Chris Koiak
    2

    Hi Brad,

    I'm pretty sure if you added this as a css class then TinyMCE wouldn't strip it out. You would be best to add the class to the <p> tag and increase the margin/padding in css.

    This approach would also mean your client/editor could reuse this via the 'styles' dropdown.

    Cheers,

    Chris

  • Seth Niemuth 275 posts 397 karma points
    Feb 17, 2010 @ 11:23
    Seth Niemuth
    0

    The reason it is cleaning it up is because there is no reason you need that div, if there is nothing in it when you can do it in the paragraph above:

     

    <p style="padding-bottom:50px;">Some text here</p>

    <p>This text should be 50 pixels down</p>

     

    Or below:

     

    <p>Some text here</p>

    <p style="padding-top:50px;">This text should be 50 pixels down</p>

  • dandrayne 1138 posts 2262 karma points
    Feb 17, 2010 @ 12:08
    dandrayne
    1

    Hi Brad

    By default, tinymce in umbraco will remove empty divs.  You can change this setting in /config/tinymcesettings.config according to the rules at http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements

    By default, it seems to use

    -div[id|dir|class|align|style]

    so it will remove empty divs.  Try removing the - and touch your web.config before checking again.  If you're still having problems, you may need to disable tidyhtml in umbracosettings.congif or the web.config (can't remember which)

    Dan

  • Brad 94 posts 151 karma points
    Feb 17, 2010 @ 15:27
    Brad
    0

    I 'fixed' it by changing the input time to simple editor. A bit disappoiting really.  All those claims of Umbraco not touching your markup.

    All points above about just putting the style on the <p> taken and appriciated.

    Despite that, I can't imagine why it would remove empty DIVs. Imagine I have a class that has an image as it's background.

        div .bgImage{
    background: black url('../images/bgimage.png') repeat-none;
    }

    Then in code I want to do this.

    <div class="bgImage"></div>

    Sure. I'm not sure why you would want to do this, but that is not the point. I tried the above and it got stripped out.

    Might not be best practice but it is valid markukp. Who decided that the editor would 'search out empty divs and delete them'?

    Very odd.

    Not a big deal in my case. Thanks all. Now I know.

     

  • Peter Dijksterhuis 1442 posts 1722 karma points
    Feb 17, 2010 @ 15:47
    Peter Dijksterhuis
    0

    Hi Brad,

    In this case it is not Umbraco that touches your markup, but it is TinyMCE doing it. TinyMCE is configured to output valid XHTML by default. Empty tags are not valid XHTML as far as I know, so they are being stripped. Fortunatelly, you can change this behaviour in many ways.

    The meaning of Umbraco not touching your markup is this: You control in your templates, macros and css what code is being spit out to the client. No extra code is being added here and you have FULL control over it. 

    Hope this clarifies things a bit,

    Regards,

    Peter

  • Brad 94 posts 151 karma points
    Feb 17, 2010 @ 23:44
    Brad
    0

    Peter

    Point taken... I should not use emply tags. I stand corrected. Thanks.

    Brad

  • dandrayne 1138 posts 2262 karma points
    Feb 17, 2010 @ 23:53
    dandrayne
    0

    Hi Brad

    Leaving aside the point of whether or not you should, If you follow the steps I list a few posts above you should be able to enter whatever markup you like into the editor and have it remain there when you publish.

    Dan

  • Seth Niemuth 275 posts 397 karma points
    Feb 19, 2010 @ 14:53
    Seth Niemuth
    0

    Dan is correct on this one. One thing I have noticed is that the change to your tinyMCEconfig file doesn't happen right away. One way I have gotten around this is to change my web.config file slightly (just put an extra space in it somewhere) so that it reloads the config files. It is the tidyEditor setting that is removing it on publish, you need to change this line: <TidyEditorContent>True</TidyEditorContent> to false in your umbracoSettings.config. You also need to make the change in your tinyMceConfig.config file as that is executed when you click the 'Update' button on your HTML View Source pop up.

  • Jake 23 posts 53 karma points
    Feb 19, 2010 @ 22:26
    Jake
    0

    I would just add a css style to give you the spacing you need

  • Mike 81 posts 101 karma points
    Jun 14, 2012 @ 00:21
    Mike
    0

    sometimes I put an empty div in when I am using jquery. I use that empty div to write output to....

  • Brett Spencer 82 posts 251 karma points
    Sep 25, 2017 @ 17:26
    Brett Spencer
    0

    Dandrayne has the solution here.

    I am dreadfully stripping a site out of WordPress. To keep exact for sake of time crunch I have to use the exact same html it produces.

    In my case tinyMCE was stripping out a header tag that was necessary for css to work.

    I added the header to the authorized tags in the config file as Dandrayne mentioned and voila - solution!

Please Sign in or register to post replies

Write your reply to:

Draft