Using TinyMCE with Razor C...

Sep 4, 2012 at 5:18 AM

I know it is not technically in scope to discuss TinyMCE here but I didn't have a good idea where else to go as I believe the problem I would like to solve may be in able to handled by Razor C. 

TinyMCE attempts to be an in place WYSIWYG editor, but I am having difficulty getting it to use the styles in my custom CSS file.  As a result the fonts show extremely small by comparison and the end user always thinks they need to change the styling on the text in TMCE.  I think due to inheritance some of the styles for the RCADMIN pages have an impact on the look of the text in the editor as well.

Is there a simple way to insure that when Tiny activates on a text box it uses a specific CSS file for its styling?

If anyone has solved this please let me know how it was done?



Sep 5, 2012 at 4:31 PM

Maybe this will help

Sep 9, 2012 at 4:50 PM
thanks, this went to junk and I missed it will give it try.
From: [email removed]
Sent: Wednesday, September 05, 2012 11:31 AM
To: [email removed]
Subject: Re: Using TinyMCE with Razor C... [razorc:394297]
Sep 22, 2012 at 9:29 AM
Edited Sep 22, 2012 at 9:58 AM

For others to use and consider reading this thread... 

Getting TinyMCE to use your styles by can be a significant effort. There is a simple attribute that can be set to have it render the content that is in the textarea using the style sheet or sheets in you site but based on my experience this will only get you half way there.

In order to have the greatest amount of success your site design should only partially follow what many consider a best practice, that is to have multiple style sheets for to render a page. This is over and above a Print or media styles. The first sheet should contain all styles for page layout, let’s call this the page structure. The second would need to contain all the styles for appearance PLUS layout within the section you are editing.  The problem is somewhat complicated by the fact that the admin pages also apply styles to the page which may cascade into TinyMCE

So if your layout is complex enough you might have many nested divs before you get to the one that holds @RenderBody() or @RenderSection. Let’s call this SCAFFOLD.CSS and it has the style settings for those divs and they should only provide page layout attributes like margin, padding, position, floats, and at most maybe background attributes and reset attributes if you include those.

Then CONTENT.CSS the second style sheet needs to containg all fonts, colors, link attributes, paragraph, settings AND ANY LAYOUT for content to be rendered by @renderbody or @renderSection. So a grid, or table, or div based columns that require position attributes need to be in this style sheet as well (or maybe a second layout css). The reason is this is the style sheet you will tell TinyMCE to use as a custom-content.css so that on your edit page you have a decent chance of providing your user with an editing experience close to what they will see when razorC displays the page.

This still could get messy and you will need to decide where the return on investment is for your customer and design.  Unfortunately for me this would take massive rework of my style sheets to get this separation and I am afraid it would be rather prone to error. I used an app to fast track the design and generate much of CSS so there is no separation of attributes in the file.  As a result the best I can do is copy my style sheets into the directory RCadmin/css and tell TINY to use them and then modify them to get as close as I can... its a quick fix that will get me by for now.

I was going to try and show such a separation with the sample templates razorC provides but right now time does not permit.  One suggestion I have for the RazorC folks is to explicitly style all elements used in the ADMIN Control Panel.  This could reduce the possibility of TinyMCE inheriting some default styles from the containing page, although I can not be sure under what circumstance this might happen.    

my conclusion is TinyMCE brings a lot of power to the HTML editing process but there is a cost that can only be partially mitigated with separation of CSS for layout and look.