Copied to clipboard

Flag this post as spam?

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


  • Jay Dobson 75 posts 121 karma points
    Mar 02, 2011 @ 21:15
    Jay Dobson
    0

    TinyMCE: Applying a CSS style to a group of HTML elements

    Hi All,

    I have a CSS class that I want the user to be able to use against one or more paragraphs.  I envisioned that the user would be able to highlight a few paragraphs, select the style, and it would apply a block element around all of them creating padding and a background color so as to highlight the text.  Instead, what it's doing, is applying the class to each selected paragraph/element individually.

    What I want:

    <span class='highlighted'>
    <p>element</p>
    <p>another element</p>
    </span>

    What I'm getting:

    <p class='highlighted'>element</p>
    <p class='highlighted'>element</p>

    Is there a way around this, or is this more of a custom TinyMCE plugin thing?  I was able to achieve the desired affect in the code blocks above, but that was by using shift-enter as I typed content.  I imagine users of the CMS will want to highlight text they've already typed, and the even more confused users won't understand that they need to use shift-enter to separate paragraphs.

    Thanks,

    Jay

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Mar 03, 2011 @ 00:39
    Jan Skovgaard
    1

    Hi Jay

    I think it' more of a custom TinyMCE plugin...back in the v3 days I remember that Ismail Mayat had a blogpost about how one could insert <div> elements in the RTE...but I'm unfortunately not able to find it at the moment.

    What is it you want to achieve with the wrapping the <span> around the paragraphs? (Which really should be a div, since <span> is an inline element, which must not contain block level elements like <p> :)) - Is it because you need to have a box arround it with some border and background color?

    Then I guess you should look into customizing Tidy.

    Hope this helps.

    /Jan

  • Jay Dobson 75 posts 121 karma points
    Mar 03, 2011 @ 00:50
    Jay Dobson
    0

    Thanks Jan,

    Yeah I imagined it would be a custom bit.  And yes, <span> around anything is bad form.  I was giving a bad example. :)

    I appreciate the quick response!  Thanks again!

    Jay

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Mar 03, 2011 @ 02:49
    Tom Fulton
    1

    FYI - the TinyMCE Template plugin might work well for this, see http://our.umbraco.org/wiki/how-tos/enabling-the-%27template%27-plugin-for-tinymce

  • Jay Dobson 75 posts 121 karma points
    Mar 03, 2011 @ 03:26
    Jay Dobson
    0

    Gold Jerry!  Gold!

    Thanks Tom.  That's awesome.  I could see it being useful for other applications as well, like creating floated captioned image blocks, etc.  Worked like a charm, and is easy enough for even the least tech-savvy content editor to use.

    Jay

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Mar 03, 2011 @ 09:06
    Jan Skovgaard
    0

    Hi Tom

    Thanks for the tip - must admit I was not aware :-)

    /Jan

  • Jay Dobson 75 posts 121 karma points
    May 10, 2011 @ 20:46
    Jay Dobson
    0

    Hey Tom (and anyone else who might know the answer to this),

    I implemented this a while back but, unfortunately, did most of my testing in IE 7/8.  I'm finding that when pressing enter in these templates breaks the structure.

    One of our templates, for example is "Blue Highlight Box" (blue background, rounded borders, white text).  The code inserted is as follows:

    <div class="blue_highlight_box">
    <h3>Heading</h3>
    <ul>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    </ul>
    </div>

    This works fine, but if I try to do a carriage return after the unordered list, it breaks the entire layout.  Alternatively, backspacing into the unordered list will do the same.  The resulting HTML ends up being:

    <h3 class="blue_highlight_box">Heading</h3>
    <div class="blue_highlight_box">
    <ul>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    </ul>
    </div>
    <p> </p>
    <p> </p>

    The more I play with it the worse it gets.  Eventually the DIV is gone.  Did you run into any issues like this when using templates and editing in IE?

    I've tried to turn Tidy off to see if that would help, but no dice.

    Thanks,

    Jay

Please Sign in or register to post replies

Write your reply to:

Draft