This is a great solution for adding your own custom styles and realistic CSS to the WYSIWYG editor in Magento 1.5. For earlier versions, you may want to have a look at this thread.
We’re going to replace, in an upgrade-proof manner, the Magento WYSIWYG css, and add a couple of our own CSS classes in there that automatically get added to the styles dropdown options in Magento 1.5.
To start off with, we need to make sure we have our own admin theme with its own layout. I have my own module for changing many aspects of the Magento layout system that already does this. If you don’t have your own admin theme, you will need to add in some nodes to the config.xml on a new or existing module.
<config>
<stores>
<admin>
<design>
<package>
<name>default</name>
</package>
<theme>
<default>yourtheme</default>
</theme>
</design>
</admin>
</stores>
</config>
Then, we need to edit one of our admin theme layout files in order to add our own piece of javascript code in:
<layout> <default> <reference name="head"> <action method="addItem"><type>js</type><name>orchid/tiny_mce/setup.js</name></action> </reference> </default> </layout>
The Javascript is just going to overload the init function of the tinymcesetup script, overriding the css location.
/js/orchid/tiny_mce/setup.js
tinyMceWysiwygSetup.prototype.initialize = function(htmlId, config)
{
this.id = htmlId;
this.config = config;
this.config.content_css = "/js/orchid/tiny_mce/custom_content.css";
varienGlobalEvents.attachEventHandler('tinymceChange', this.onChangeContent.bind(this));
this.notifyFirebug();
if(typeof tinyMceEditors == 'undefined') {
tinyMceEditors = $H({});
}
tinyMceEditors.set(this.id, this);
}
Then just copy /js/mage/adminhtml/wysiwyg/tiny_mce/themes/advanced/skins/default/content.css to /js/orchid/tiny_mce/custom_content.css and add a couple of classes in there
e.g.
.blackBold{font-weight:bold;color:#333;}
Originally published on magebase.com. Copyright © 2011 Magebase - All Rights Reserved.
Proud members of the 
[...] Adding Custom CSS and Custom Style Options to the WYSIWYG Editor : Wie man eigene Formatierung im TinyMCE in Magento einfügt [...]
That’s brilliant!! Thanks for the tip!
Wait… I could alter the styling in the TinyMCE (custom class from drop down and even to change the body background), but no styling is rendered on the actual page itself…
Suggestions?
The frontend won’t by default pick up the WYSIWYG CSS file.
You’ll probably want to either repeat your styles in your frontend CSS or import your WYSIWYG css file into your frontend CSS file.
Personally, I have very few custom styles available in the WYSIWYG, so just copy the styles form one file to the other.
Thanks, Dane!
That should of been obvious… on my better days. What I have done for now is adding:
../../../../js/orchid/tiny_mce/custom_content.css
To my “head” reference for the frontend. Working well, might copy the styles over later when I’m happy with the results.
Cheers,
Jesse.
Excellent post,great advice,It will be more helpful for the us.thanks for sharing
Hi Dane
There is one thing missing in your article, above doesn’t seem to work in frontend unless you include the custom_content.css from your frontend theme as:
app/design/adminhtml/{interface}/{theme}/layout/local.xml
By including the above code works perfectly.
Anyway great article though!
Thanks
Regards
MagePsycho
Corrected:
app/design/adminhtml/{interface}/{theme}/layout/local.xml
should be
app/design/frontend/{interface}/{theme}/layout/local.xml
In IE, you can get the JavaScript error: ‘tinyMceWysiwygSetup’ is undefined.
Here is the fix:
/js/orchid/tiny_mce/setup.js
if (typeof(tinyMceWysiwygSetup) != 'undefined') { tinyMceWysiwygSetup.prototype.initialize = function(htmlId, config) { this.id = htmlId; this.config = config; this.config.content_css = "/js/orchid/tiny_mce/custom_content.css"; varienGlobalEvents.attachEventHandler('tinymceChange', this.onChangeContent.bind(this)); this.notifyFirebug(); if(typeof tinyMceEditors == 'undefined') { tinyMceEditors = $H({}); } tinyMceEditors.set(this.id, this); } }Note the condition: if (typeof(tinyMceWysiwygSetup) != ‘undefined’) { which fix the js issue.
Hope this helps.
Thanks
Regards
If l put an entire website page/layout into the WYSIWYG editor is there a way to prevent it from being messed up if a user puts their cursor at the begining of an element and hitting the delete key? Thus making the entire layout get screwed up and merging with the previous element in the markup.
Any help would be greatly appreciated.
this working for me!!
app/design/adminhtml/{interface}/{theme}/layout/local.xml
<?xml version="1.0"?> <layout version="0.1.0"> <default> <reference name="head"> <action method="addItem"><type>js</type><name>{company}/tiny_mce/setup.js</name></action> </reference> </default> </layout>/magento/js/{company}/tiny_mce/setup.js
the key is: tinyMCE.baseURL + “../../../skin..”
if (typeof(tinyMceWysiwygSetup) != 'undefined') { tinyMceWysiwygSetup.prototype.initialize = function(htmlId, config) { this.id = htmlId; this.config = config; this.config.content_css = tinyMCE.baseURL + "../../../skin/frontend/{interface}/{theme}/css/custom_content.css"; varienGlobalEvents.attachEventHandler('tinymceChange', this.onChangeContent.bind(this)); this.notifyFirebug(); if(typeof tinyMceEditors == 'undefined') { tinyMceEditors = $H({}); } tinyMceEditors.set(this.id, this); } }