Admin Adminhtml WYSIWYG TinyMCE – How to Edit Admin TinyMCE JavaScript Code Without Modifying Core Files

adminadminhtmltinymcewysiwyg

I'm looking to change the init of TinyMCE for Magento admin.

I'm just not satisfied with the default options and want to give my client a more user-friendly way of working with. So I want to remove some plugins, change some options and perhaps add some other plugins. But I want to keep the integrated Magento functionality.

I have not yet found a way to acomplish this without editing the js/mage/adminhtml/wysiwyg/tiny_mce/setup.js directly.

Is there a working solution?

UPDATE

Tobias' solution works very well! As you can read below, I had some trouble getting it to work due to 403 forbidden errors on my localhost. On my staging server however it worked as expected.

After some more testing, I found that the Fooman_Speedster extension I had installed was the cause of the problem. After disabling that, everything works fine!

Best Answer

You can esily create your own module (depends on Mage_Adminhtml) which is extending that js file:

config.xml:

<?xml version="1.0"?>
<config>
    <modules>
        <Your_Module>
            <version>0.0.1</version>
        </Your_Module>
    </modules>

    <adminhtml>
        <layout>
            <updates>
                <your_module>
                    <file>your/module.xml</file>
                </your_module>
            </updates>
        </layout>
    </adminhtml>
</config>

In your layout file you add a custom js to the header:

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addItem">
                <type>skin_js</type>
                <name>your_module/wysiwyg/tiny_mce/setup.js</name>
                <params/>
                <if/>
                <condition>can_load_tiny_mce</condition>
            </action>
        </reference>
    </default>
</layout>

And in the new setup.js you can overwrite the prototype object:

(function (getSettings) {
    tinyMceWysiwygSetup.prototype.getSettings = function (mode) {
        var oSettings = getSettings.call(this, mode);
        oSettings.extended_valid_elements = "article[class]";
        return oSettings;
    };
}(tinyMceWysiwygSetup.prototype.getSettings));

Related Solutions

Magento Admin – How to Copy Code/Core system.xml File into Code/local

For the system.xml files it doesn't work like it does for class files. The system.xml files are collected from the active modules of Magento. Just copying one in local folder it doesn't mean it's in a module, because the module declaration file still says that the module belongs to the core codepool.
If you want to add new fields to a section or override some of the fields you need to create you own module.
Here is an example of how you can add a new field in the section Catalog->Frontend and how you can override one in the same section.
Let's say that your module is called Easylife_Catalog.
You will need the following files:
app/etc/modules/Easylife_Catalog.xml - the declaration file

<?xml version="1.0"?>
<config>
    <modules>
        <Easylife_Catalog>
            <active>true</active>
            <codePool>local</codePool>
            <depends>
                <Mage_Catalog />
            </depends>
        </Easylife_Catalog>
    </modules>
</config>

app/code/local/Easylife/Catalog/etc/config.xml - the configuration file

<?xml version="1.0"?>
<config>
    <modules>
        <Easylife_Catalog>
            <version>0.0.1</version>
        </Easylife_Catalog>
    </modules>
</config>

app/etc/local/Easylife/Catalog/etc/system.xml - system->configuration file
Let's say you want to change the List Mode field to be available only at global level (no website and store view level). The setting path is catalog/frontend/list_mode. Then the system.xml will look like this:

<?xml version="1.0"?>
<config>
    <sections>
        <catalog><!-- first part of the path -->
            <groups>
                <frontend><!-- second part of the path -->
                    <fields>
                        <list_mode><!-- third part of the path -->
                            <show_in_website>0</show_in_website><!-- this will override the core value -->
                            <show_in_store>0</show_in_store><!-- this will override the core value -->
                        </list_mode>
                    </fields>
                </frontend>
            </groups>
        </catalog>
    </sections>
</config>

Now let's say you want to add a new field called custom in the same config section. Now the xml above becomes

<?xml version="1.0"?>
<config>
    <sections>
        <catalog><!-- first part of the path -->
            <groups>
                <frontend><!-- second part of the path -->
                    <fields>
                        <list_mode><!-- third part of the path -->
                            <show_in_website>0</show_in_website><!-- this will override the core value -->
                            <show_in_store>0</show_in_store><!-- this will override the core value -->
                        </list_mode>
                        <custom translate="label"><!-- your new field -->
                            <label>Custom</label>
                            <frontend_type>text</frontend_type>
                            <sort_order>1000</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </custom>
                    </fields>
                </frontend>
            </groups>
        </catalog>
    </sections>
</config>

I don't know if there is a method to remove some field from the configuration using this method. I looked for it but didn't find anything.

Magento – Core Javascript files aren’t working, and admin menu’s won’t dropdown

The answer for me turns out to be related to the Magento JS and CSS Minification process.

Prior to the migration I enabled them and disabled them after noticing a few problems with the process. It went back to working order on the live site, however it completely modified the theme's javascript and css files.

Replacing all the RWD theme CSS and Javascript files along with my child theme's CSS and Javascript files resolved the problem.

I wish there was a way to recover the non-modified CSS files but if redoing my CSS file is the worst outcome from all this I am okay with it.

Best Answer

Related Solutions

Magento Admin – How to Copy Code/Core system.xml File into Code/local

Magento – Core Javascript files aren’t working, and admin menu’s won’t dropdown

Related Topic