Styling within the TinyMce editor can be a little tricky depending on how complex your requirements are.
The usual convention is to create a new stylesheet that is used by your Rich Text Editor (Developer, Data Type, Rich Text Editor -> Stylesheet).
If you right click this stylesheet you can then add styles which are avalible inside TinyMce.
So you would probally want a style...
Name: Float Right
Alias: .float-right
Style: float: right; padding: 1em 0 1em;
The Name appears in the styles drop down in TinyMce, the alias gets added/filters the HTML element in the RTE (e.g. you could filter the style to just IMG or H1, etc). And the style is the CSS that gets applied inside the editor.
You would then need to add a corresponding style in your main stylesheet, e.g. layout.css, etc
Thanks Laurence. I tried this, and it works... well sometimes. With blocks of text it's easy to assign a class. With an image though, I select an image and then assign it my CSS class and it does not seem to stick.
Aside from that, I'm really looking for a solution that will wrap the image in a div because I'd have a bit more control over the image – similar to how Wordpress wraps its images in a div. This may not be possible without some custom work though I'm realizing.
I've been doing this "in post", so to speak, by processing the RTE content with XSLT when rendering. It's not for everyone, but I wrote an article about it, if you're into that kind of thing. It certainly would let you do exactly that to images...
Yeah, I love markdown. Chriztian, I read your article on the XLST post. I'll give that a try. It sounds interesting. I could probably have it produce any kind of markup when a class is applied in rich text mode. I'll let you know how it goes.
Align images left and right / float in rich text editor?
In the rich text editor, is there a way for a content editor to align an image left or right, while having the text wrap around?
Ideally I would like the resulting markup to look something like this.
Styling within the TinyMce editor can be a little tricky depending on how complex your requirements are.
The usual convention is to create a new stylesheet that is used by your Rich Text Editor (Developer, Data Type, Rich Text Editor -> Stylesheet).
If you right click this stylesheet you can then add styles which are avalible inside TinyMce.
So you would probally want a style...
Name: Float Right
Alias: .float-right
Style: float: right; padding: 1em 0 1em;
The Name appears in the styles drop down in TinyMce, the alias gets added/filters the HTML element in the RTE (e.g. you could filter the style to just IMG or H1, etc). And the style is the CSS that gets applied inside the editor.
You would then need to add a corresponding style in your main stylesheet, e.g. layout.css, etc
http://our.umbraco.org/wiki/recommendations/recommended-reading-for-content-editors/adding-styles-to-the-tinymce
Thanks Laurence. I tried this, and it works... well sometimes. With blocks of text it's easy to assign a class. With an image though, I select an image and then assign it my CSS class and it does not seem to stick.
Aside from that, I'm really looking for a solution that will wrap the image in a div because I'd have a bit more control over the image – similar to how Wordpress wraps its images in a div. This may not be possible without some custom work though I'm realizing.
Hi Kurt,
I've been doing this "in post", so to speak, by processing the RTE content with XSLT when rendering. It's not for everyone, but I wrote an article about it, if you're into that kind of thing. It certainly would let you do exactly that to images...
/Chriztian
^ The above is how I do it on 7.75 out of 10 projects,
But I increasingly think that for larger projects a markdown apporach can work really well.
Yeah, I love markdown. Chriztian, I read your article on the XLST post. I'll give that a try. It sounds interesting. I could probably have it produce any kind of markup when a class is applied in rich text mode. I'll let you know how it goes.
is working on a reply...