topic Re: tinyMCE style not matching site style in Alfresco Archive

tinyMCE style not matching site style

chrisokelly — Fri, 30 Mar 2012 00:56:36 GMT

Hi Alfresco'ers (Sharers? Explorers?),We have recently set up Alfresco 4.0.b Community in an Ubuntu/Postgres/Tomcat environment. I have also implemented a custom theme based off the red fmeTheme here http://code.google.com/p/fme-alfresco-extensions/wiki/FmeTheme. After some initial problems (the fme

Re: tinyMCE style not matching site style

davidcognite — Thu, 05 Apr 2012 09:37:31 GMT

Hi Chris,

I see you've found the JIRA ticket (ALF-11999 for anyone else following this thread) & set up a watch - you'll be notified there once we actually fix this issue, but in the mean time, have you tried using an @import css statement inside TinyMCE's content.css on the active theme? That will pull the necessary style sheet into the TinyMCE editor's iframe.

However, I suspect that a significant number of the styles in presentation.css may need to be modified to work within the context of of the TinyMCE iframe - for example, those prefixed with .sticky-wrapper won't match anything. Give it a try & once you've got it imported, you'll be able to have a play and modify the styles that need tweaking. This is probably best done within the presentation.css file by adding an additional selector to any rule that isn't correctly applied and prefix that new selector with #tinymce to keep the less specific selector scoped to only TinyMCE.

I'll link the JIRA ticket to this thread, so if you wouldn't mind reporting back on how well that works, it'll help us when we come to fix that bug.

Thanks,
David.

Re: tinyMCE style not matching site style

chrisokelly — Mon, 09 Apr 2012 22:16:05 GMT

Hi David,

Thanks for responding, I was actually wondering with some of my testing since originally making this post whether this may be less related to stylesheets and more to this - https://forums.alfresco.com/en/viewtopic.php?f=47&t=23632&start=30 ? I originally thought that the problem was that TinyMCE was ignoring our styles changes as they matched the stylesheet and thus needed no tags added in that context, however have since discovered that, for example with fontsize, no matter what we set our font size to with TinyMCE it remains unchanged when published.

In regards to the workaround you suggested - importing the presentation.css into TinyMCE's content.css, I only lost you when it comes to TinyMCE's content.css (I am fairly new to Alfresco's layout). In our development environment we have


/Source
-/web
–/themes
—/customTheme
—-/images
—-/yui
—–/assets
‍‍‍‍‍‍‍‍‍

Inside CustomTheme we have a presentation.css and login.css, inside /assets we have skin.css. Would TinyMCE's content.css fit somewhere in here or would we need to map a different directory structure?