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.
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.
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.
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.
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:
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:
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:
What I'm getting:
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
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
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
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
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
Hi Tom
Thanks for the tip - must admit I was not aware :-)
/Jan
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
is working on a reply...