Author - Dane Lowe

I am a freelance web developer specialising in Magento and Zend Framework development.

More Info »

Reader Comments (11)

  1. Lesetipps im März 2011 | Magento eCommerce, Webshop, Reddot - webguys.de

    […] Adding Custom CSS and Custom Style Options to the WYSIWYG Editor : Wie man eigene Formatierung im TinyMCE in Magento einfügt […]

  2. Jesse
    Jesse
    March 10, 2011 at 1:26 pm /

    That’s brilliant!! Thanks for the tip!

    Reply
  3. Jesse
    Jesse
    March 10, 2011 at 1:37 pm /

    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?

    Reply
  4. Jesse
    Jesse
    March 10, 2011 at 3:25 pm /

    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.

    Reply
  5. Magento Extension Development
    May 24, 2011 at 6:31 pm /

    Excellent post,great advice,It will be more helpful for the us.thanks for sharing

    Reply
  6. MagePsycho
    August 24, 2011 at 6:11 pm /

    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

    ...
    <default>
    	<reference name="head">
    		<action method="addCss"><stylesheet>../../../../js/orchid/tiny_mce/custom_content.css</stylesheet></action>
    	</reference>
    </default>
    ...
    

    By including the above code works perfectly.

    Anyway great article though!

    Thanks
    Regards
    MagePsycho

    Reply
  7. MagePsycho
    August 24, 2011 at 7:46 pm /

    Corrected:
    app/design/adminhtml/{interface}/{theme}/layout/local.xml
    should be
    app/design/frontend/{interface}/{theme}/layout/local.xml

    Reply
  8. MagePsycho
    August 26, 2011 at 11:32 pm /

    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

    Reply
  9. Jeff
    Jeff
    November 28, 2011 at 10:02 am /

    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.

    Reply
  10. oliver montes
    July 31, 2012 at 3:04 am /

    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);
        }
    }
    

    Reply

Add a Comment & Join the Discussion

Insert small snippets of code by using [code]{your_code_here}[/code]
For larger code blocks please use http://pastebin.com and paste your link.

You may also use the following HTML in your comment: <a href="" title=""> <abbr title="">
<acronym title=""> <blockquote cite=""> <cite> <em> <strike> <strong>