Copied to clipboard

Flag this post as spam?

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


  • Max Davidse 16 posts 37 karma points
    Apr 07, 2011 @ 11:57
    Max Davidse
    0

    Image in rich text editor without paragraph tag?

    Hi everyone,

    My first ever Umbraco site is about done, there is just one thing I can't yet figure out how to do.

    When entering content through the rich text editor, every time you enter, you get a new p tag, fine, as it creates valid HTML, however, when I place an image into this rich text editor, i want that to be outside of any p tags.

    So for example:

    <p><strong>Etiam vulputate, quam et ultricies consectetur, velit lacus aliquam velit, id dapibus quam ligula sit amet diam. Morbi tristique faucibus elit, id dignissim mi congue vitae. Donec luctus gravida volutpat. Praesent ac velit risus. Vestibulum arcu nibh, posuere eu euismod at, suscipit et sapien. Quisque lacinia mattis placerat. Mauris ut erat ac metus vestibulum varius. Pellentesque pellentesque, nisl in porttitor rhoncus, ligula leo convallis dolor, et pretium urna nibh non mauris. Aliquam viverra adipiscing massa, vel faucibus neque sollicitudin ac. Morbi iaculis tincidunt augue quis congue. Suspendisse elementum lobortis vestibulum. Ut porta ullamcorper leo et commodo.</strong></p>
    <img src="/media/1.jpg" width="410" height="220" border="0" alt="Phasellus aliquet eros at dolor aliquam at malesuada mauris congue." />

    That is how I want it to be, and I can change that myself no problem, by going to HTML view. I can't however, expect clients to do that. Is there any way I can make an image fall outside of p tags?

    Thanks in advance.

  • Max Davidse 16 posts 37 karma points
    Apr 07, 2011 @ 12:01
    Max Davidse
    0

    Hmm...somehow that didn't post how I wanted. I meant to show that as:

    <p><strong>Etiam vulputate, quam et ultricies consectetur, velit lacus aliquam velit, id dapibus quam ligula sit amet diam. Morbi tristique faucibus elit, id dignissim mi congue vitae. Donec luctus gravida volutpat. Praesent ac velit risus. Vestibulum arcu nibh, posuere eu euismod at, suscipit et sapien. Quisque lacinia mattis placerat. Mauris ut erat ac metus vestibulum varius. Pellentesque pellentesque, nisl in porttitor rhoncus, ligula leo convallis dolor, et pretium urna nibh non mauris. Aliquam viverra adipiscing massa, vel faucibus neque sollicitudin ac. Morbi iaculis tincidunt augue quis congue. Suspendisse elementum lobortis vestibulum. Ut porta ullamcorper leo et commodo.</strong></p>
    <img src="/media/1.jpg" width="410" height="220" border="0" alt="Phasellus aliquet eros at dolor aliquam at malesuada mauris congue." />

  • Niels Hartvig 1951 posts 2391 karma points c-trib
    Apr 07, 2011 @ 12:07
    Niels Hartvig
    0

    That's not possible by default as it would be invalid html - an img tag needs a container!

    I believe you can change this behavior in the tinymceConfig.config in /config folder under validElements.

  • Max Davidse 16 posts 37 karma points
    Apr 07, 2011 @ 12:25
    Max Davidse
    0

    I got told this too, but always look for ways to do things the way we intended them ;) Or at least our frontend developer wanted it.

    So now, I changed the stylesheet, so the div that gets automatically placed around the image, gets a negative margin, making it look the same as it did without the paragraph tag. Not as elegant as I want it to be, but it works all the same.

    Thanks for thinking along Niels. It is greatly appreciated.

Please Sign in or register to post replies

Write your reply to:

Draft