1. I set up a Document Type with a Rich Text Editor field. When I edit the contents, there is no way in the editor I can see to set text to a heading (h1, h2 h3, etc.) I have been doing that with the direct HTML editing. Can this be fixed? I went in to the developer section and checked every box in the Rich Text editor data type. Every other web based html editor I've used allows this, not sure why it isn't here.
2. I checked my style sheet in the data type. The editor now displays the text with the styles appied, but the styles dropdown does not drop down to allow me to pick anything. I have to manually edit the HTML again to apply a class to a tag. Can this be corrected?
3. When you manually edit HTML in the pop up window, it sometimes strips out what I put in. For example, if I create this: <span style="font-size: 8pt;"> it strips out the style. I think this is bad behaviour. When editing manually it should take whatever I type without change. Or there should be an option to allow it or not. This also caused a problem when I pasted in text from my old site, and it stripped out certain things. Can this be corrected?
I'm not too sure what the difference between the two methods are, but I typically use the second method.
For #3, TinyMCE only allows certain tags & attributes on those tags by default. In your example, it probably doesn't allow the style attribute on a span tag. To allow this, try editing /config/tinyMceConfig.config and find the <validElements> area. Try changing "-span[class|align]" to "-span[class|align|style]". Alternatively, someone wrote a Wiki on Allowing any markup in the TinyMCE editor if you need more flexibility. Note, I believe this disables the "Tidy" (code cleanup) function.
I noticed the method of editing the config doesn't seem to work. Was this changed at some point?
I'm doing a huge upgrade of our corporate website, and we had quite a bit of custom styles that got nuked in my proof of concept that were supposed to show up in TinyMCE's drop-down. I can add them back manually as nodes on the stylesheet node in the settings section, but that's a lot of manual work I'd like to avoid because I'm going to be upgrading the database last-minute as part of the deploy (so that the people who manage the content don't have to deal with a content freeze). It would just be one more manual step as part of the deploy that I don't care to do. ;)
If you've upgraded to Umbraco 7, you can add the custom styles to the stylesheet file and Umbraco will pick them up. (Sorry I don't know which version - but I know 7.4.x works like this).
Thanks for the reply. I will look in to the instructions to add styles, and the allowed attributes.
The problem with headings are they are NOT styles, they are markup. Look at the Paragraph dropdown in the sample at the TinyMCE site. This is what I am talking about. All editors have that, and this should be enabled for Umbraco as well. I just realized as I am typing that the same dropdown is in this editor! This is a very basic part of HTML editing and needs to be there. How can this be done?
Are you referring to the Formatting dropdown box on that link? That I'm not too sure about...and I just realized it's in this editor also...interesting! Maybe someone can chime in on this..
But, adding "h1" or "p" to the Styles dropdown in the above examples will behave like you want - it actually adds the <H1> and <p> markup tags, not just apply a style. Not too sure about the inner-workings, but it works :)
"You have 100% control over formatting. Instead of allowed styles, headers and colors, we simply have one “Choose style” dropdown. It combines headers and special styles, so the editor doesn’t need to worry about which is what and items are easily added to the dropdown by adding substyles on a stylesheet added to umbraco (simply right click a stylesheet and select create)"
Excellent find! It makes sense, sort of. I tried it and it works. You do have to set it up exactly right though. I understand they were trying to simplify things but I think these 'substyles' or whatever they are are too cryptic. I would have been happy with the regular drop downs that we are all used to.
Rich Text Editor questions
1. I set up a Document Type with a Rich Text Editor field. When I edit the contents, there is no way in the editor I can see to set text to a heading (h1, h2 h3, etc.) I have been doing that with the direct HTML editing. Can this be fixed? I went in to the developer section and checked every box in the Rich Text editor data type. Every other web based html editor I've used allows this, not sure why it isn't here.
2. I checked my style sheet in the data type. The editor now displays the text with the styles appied, but the styles dropdown does not drop down to allow me to pick anything. I have to manually edit the HTML again to apply a class to a tag. Can this be corrected?
3. When you manually edit HTML in the pop up window, it sometimes strips out what I put in. For example, if I create this: <span style="font-size: 8pt;"> it strips out the style. I think this is bad behaviour. When editing manually it should take whatever I type without change. Or there should be an option to allow it or not. This also caused a problem when I pasted in text from my old site, and it stripped out certain things. Can this be corrected?
Umbraco 4.03
For #1 and #2, you will need to configure which Styles (including things like H1, H2, .myclass, etc) show up in the dropdown. There are 2 ways I know of doing this. Here's a link that explains one method on the Wiki: http://our.umbraco.org/wiki/how-tos/customizing-the-wysiwyg-rich-text-editor-(tinymce)/add-styles-to-the-drop-down-menu-for-editors-to-use
The other method I know of involves editing /config/tinyMceConfig.config and adding the allowed styles to the Config Key at the bottom. Ex:
I'm not too sure what the difference between the two methods are, but I typically use the second method.
For #3, TinyMCE only allows certain tags & attributes on those tags by default. In your example, it probably doesn't allow the style attribute on a span tag. To allow this, try editing /config/tinyMceConfig.config and find the <validElements> area. Try changing "-span[class|align]" to "-span[class|align|style]". Alternatively, someone wrote a Wiki on Allowing any markup in the TinyMCE editor if you need more flexibility. Note, I believe this disables the "Tidy" (code cleanup) function.
Hey Tom,
I noticed the method of editing the config doesn't seem to work. Was this changed at some point?
I'm doing a huge upgrade of our corporate website, and we had quite a bit of custom styles that got nuked in my proof of concept that were supposed to show up in TinyMCE's drop-down. I can add them back manually as nodes on the stylesheet node in the settings section, but that's a lot of manual work I'd like to avoid because I'm going to be upgrading the database last-minute as part of the deploy (so that the people who manage the content don't have to deal with a content freeze). It would just be one more manual step as part of the deploy that I don't care to do. ;)
Thanks,
Jay
Hi Jay,
If you've upgraded to Umbraco 7, you can add the custom styles to the stylesheet file and Umbraco will pick them up. (Sorry I don't know which version - but I know 7.4.x works like this).
The format has changed - they look like this now:
Hope this helps
/Chriztian
Hey Chriztian,
JUST discovered this within the last 20 minutes. Thanks so much though!
Jay
Tom,
Thanks for the reply. I will look in to the instructions to add styles, and the allowed attributes.
The problem with headings are they are NOT styles, they are markup. Look at the Paragraph dropdown in the sample at the TinyMCE site. This is what I am talking about. All editors have that, and this should be enabled for Umbraco as well. I just realized as I am typing that the same dropdown is in this editor! This is a very basic part of HTML editing and needs to be there. How can this be done?
Thanks.
Are you referring to the Formatting dropdown box on that link? That I'm not too sure about...and I just realized it's in this editor also...interesting! Maybe someone can chime in on this..
But, adding "h1" or "p" to the Styles dropdown in the above examples will behave like you want - it actually adds the <H1> and <p> markup tags, not just apply a style. Not too sure about the inner-workings, but it works :)
Actually, I think I found out why:
"You have 100% control over formatting. Instead of allowed styles, headers and colors, we simply have one “Choose style” dropdown. It combines headers and special styles, so the editor doesn’t need to worry about which is what and items are easily added to the dropdown by adding substyles on a stylesheet added to umbraco (simply right click a stylesheet and select create)"
from: http://umbraco.org/blog/2008/12/17/final-umbraco-4-beta-released
Tom,
Excellent find! It makes sense, sort of. I tried it and it works. You do have to set it up exactly right though. I understand they were trying to simplify things but I think these 'substyles' or whatever they are are too cryptic. I would have been happy with the regular drop downs that we are all used to.
Thanks.
is working on a reply...