Can someone help ease the pain of using the TinyMce editor to edit the content while I'm developing a new site? Can't I edit content using Visual Studio (or any other editor) and then use TinyMce only after I deploy the site?
In particular, I'm having pain issues with css and the TinyMce editor:
My css file specifies a dark background color for the body. I have a css class that specifies a light background color for a box, and I'm putting text in the box. The problem is that the TinyMce editor only sees the background attribute for the body, so I can't edit my text because in the editor it's black on black. The published site looks fine with the black text in the light background box.
The other problem is that TinyMce has cached the css somewhere, so even after I deleted the background attribute from the body tag, TinyMce insists on keeping its background black.
I add two stylesheets to my TinyMCE DataTypes. One stylesheet contains rules created to be available inside TinyMCE, the other contains rules to be default in the editor (body background, text color, base font-size...). These could be contained in a single sheet, but I find it easier to maintain two, because styles available inside the editor need to be defined so particularly.
The sheets I use for TinyMCE are separate from the ones actually used for the site, again for maintenance and portability. Once you have committed stylesheets to a particular TinyMCE datatype, you can customize rules so that your TinyMCE editor displays as expected. For example, I have a TinyMCE for editing content that will go in the margin/sidebar. This editor has rules to simulate the different background and text colors of a margin, versus main content. In short, use dedicated stylesheets for each TinyMCE datatype, don't try to retrofit the stylesheets used for the site.
I don't know of a way to edit content outside the GUI of umbraco. Certainly it could be done in Visual Studio, but there is a lot to it, with versioning, publish criteria, etc. Content doesn't have to be entered in a TinyMCE editor, there are a couple other text edit controls, but Tiny MCE is the only way I know for wysiwyg content with umbraco.
Quite right, you might want to put your TinyMCE-specific css into a standalone css file. The advantage is that you can easily re-use it on various sites/projects and you never bother to send that css to the website visitor, saving a few bytes.
In practice, I typically only have one or two css rules for TinyMCE (for body background color, for instance) and all the other css for the site is appropriate for the richtext editor and works fine. At least the way I tend to structure my sites and css.
But everyone is different in their approach and project needs so do what is best for your situation.
Help with CSS in TinyMCE editor
Can someone help ease the pain of using the TinyMce editor to edit the content while I'm developing a new site? Can't I edit content using Visual Studio (or any other editor) and then use TinyMce only after I deploy the site?
In particular, I'm having pain issues with css and the TinyMce editor:
My css file specifies a dark background color for the body. I have a css class that specifies a light background color for a box, and I'm putting text in the box. The problem is that the TinyMce editor only sees the background attribute for the body, so I can't edit my text because in the editor it's black on black. The published site looks fine with the black text in the light background box.
The other problem is that TinyMce has cached the css somewhere, so even after I deleted the background attribute from the body tag, TinyMce insists on keeping its background black.
Help!
I generally add a few special css entries to avoid this problem.
Check out this forum thread for the details: http://our.umbraco.org/forum/using/ui-questions/4256-V4-CSS-for-TinyMCE-special-classes,-ids
cheers,
doug.
Excellent! Thanks Doug. That did the trick.
--steve
I add two stylesheets to my TinyMCE DataTypes. One stylesheet contains rules created to be available inside TinyMCE, the other contains rules to be default in the editor (body background, text color, base font-size...). These could be contained in a single sheet, but I find it easier to maintain two, because styles available inside the editor need to be defined so particularly.
The sheets I use for TinyMCE are separate from the ones actually used for the site, again for maintenance and portability. Once you have committed stylesheets to a particular TinyMCE datatype, you can customize rules so that your TinyMCE editor displays as expected. For example, I have a TinyMCE for editing content that will go in the margin/sidebar. This editor has rules to simulate the different background and text colors of a margin, versus main content. In short, use dedicated stylesheets for each TinyMCE datatype, don't try to retrofit the stylesheets used for the site.
I don't know of a way to edit content outside the GUI of umbraco. Certainly it could be done in Visual Studio, but there is a lot to it, with versioning, publish criteria, etc. Content doesn't have to be entered in a TinyMCE editor, there are a couple other text edit controls, but Tiny MCE is the only way I know for wysiwyg content with umbraco.
Quite right, you might want to put your TinyMCE-specific css into a standalone css file. The advantage is that you can easily re-use it on various sites/projects and you never bother to send that css to the website visitor, saving a few bytes.
In practice, I typically only have one or two css rules for TinyMCE (for body background color, for instance) and all the other css for the site is appropriate for the richtext editor and works fine. At least the way I tend to structure my sites and css.
But everyone is different in their approach and project needs so do what is best for your situation.
cheers,
doug.
is working on a reply...