Magento WYSIWYG editor button not working

Question

in magento administration > product page, I click on the WYSIWYG button to open the tiny_mce editor, but nothing happens. I checked the page console using Firebug and I'm getting the following error:

catalogWysiwygEditor is not defined

and the error applies to this part of code:

<button  id="id_24edece0c646ca9ab683ec22d0479550" title="WYSIWYG Editor" type="button" class="scalable btn-wysiwyg" onclick="catalogWysiwygEditor.open('http://website.com/index.php/admin/catalog_product/wysiwyg/key/0126e7041c67954f9612a311681b7915/', 'description')" style=""><span><span><span>WYSIWYG Editor</span></span></span></button>

Is there anyway to fix this?

-------UPDATE-----

I found that the reason for this happening is that the app/design/adminihtml/default/default/template/catalog/wysiwyg/js.phtml file is not loaded.

I just can't find why though. It should be loaded based on the app/design/adminihtml/default/default/layout/catalog.xml file:

<adminhtml_catalog_product_edit>
    ...
    <reference name="js">
        <block type="adminhtml/catalog_product_edit_js" template="catalog/product/js.phtml" name="catalog_product_js"></block>
        <block type="core/template" name="catalog.wysiwyg.js" template="catalog/wysiwyg/js.phtml"/>
    </reference>
</adminhtml_catalog_product_edit>

Any ideas?

Answer 1

The only solution I found for this one was to add the missing javascript code, directly in the app/design/adminihtml/default/default/template/catalog/product/edit.phtml file. It's not an elegant solution, but it's the only one taht worked:

<script type="text/javascript">
//<![CDATA[

Window.keepMultiModalWindow = true;
var catalogWysiwygEditor = {
    overlayShowEffectOptions : null,
    overlayHideEffectOptions : null,
    open : function(editorUrl, elementId) {
        if (editorUrl && elementId) {
            new Ajax.Request(editorUrl, {
                parameters: {
                    element_id: elementId+'_editor',
                    store_id: '<?php echo $this->getStoreId() ?>'
                },
                onSuccess: function(transport) {
                    try {
                        this.openDialogWindow(transport.responseText, elementId);
                    } catch(e) {
                        alert(e.message);
                    }
                }.bind(this)
            });
        }
    },
    openDialogWindow : function(content, elementId) {
        this.overlayShowEffectOptions = Windows.overlayShowEffectOptions;
        this.overlayHideEffectOptions = Windows.overlayHideEffectOptions;
        Windows.overlayShowEffectOptions = {duration:0};
        Windows.overlayHideEffectOptions = {duration:0};

        Dialog.confirm(content, {
            draggable:true,
            resizable:true,
            closable:true,
            className:"magento",
            windowClassName:"popup-window",
            title:'WYSIWYG Editor',
            width:950,
            height:555,
            zIndex:1000,
            recenterAuto:false,
            hideEffect:Element.hide,
            showEffect:Element.show,
            id:"catalog-wysiwyg-editor",
            buttonClass:"form-button",
            okLabel:"Submit",
            ok: this.okDialogWindow.bind(this),
            cancel: this.closeDialogWindow.bind(this),
            onClose: this.closeDialogWindow.bind(this),
            firedElementId: elementId
        });

        content.evalScripts.bind(content).defer();

        $(elementId+'_editor').value = $(elementId).value;
    },
    okDialogWindow : function(dialogWindow) {
        if (dialogWindow.options.firedElementId) {
            wysiwygObj = eval('wysiwyg'+dialogWindow.options.firedElementId+'_editor');
            wysiwygObj.turnOff();
            if (tinyMCE.get(wysiwygObj.id)) {
                $(dialogWindow.options.firedElementId).value = tinyMCE.get(wysiwygObj.id).getContent();
            } else {
                if ($(dialogWindow.options.firedElementId+'_editor')) {
                    $(dialogWindow.options.firedElementId).value = $(dialogWindow.options.firedElementId+'_editor').value;
                }
            }
        }
        this.closeDialogWindow(dialogWindow);
    },
    closeDialogWindow : function(dialogWindow) {
        // remove form validation event after closing editor to prevent errors during save main form
        if (typeof varienGlobalEvents != undefined && editorFormValidationHandler) {
            varienGlobalEvents.removeEventHandler('formSubmit', editorFormValidationHandler);
        }

        //IE fix - blocked form fields after closing
        $(dialogWindow.options.firedElementId).focus();

        //destroy the instance of editor
        wysiwygObj = eval('wysiwyg'+dialogWindow.options.firedElementId+'_editor');
        if (tinyMCE.get(wysiwygObj.id)) {
           tinyMCE.execCommand('mceRemoveControl', true, wysiwygObj.id);
        }

        dialogWindow.close();
        Windows.overlayShowEffectOptions = this.overlayShowEffectOptions;
        Windows.overlayHideEffectOptions = this.overlayHideEffectOptions;
    }
};

//]]>
</script>

Answer 2

The solution is to go to: /js/mage/adminhtml/wysiwyg/tiny_mce/plugins/magentowidget and copy this file to the desktop: editor_plugin.js.

Then go to: /js/mage/adminhtml/wysiwyg/tiny_mce/plugins/ and create a directory called: magentotypo.

Finally, paste editor_plugin.js into the directory magentotypo.

Done!

Answer 3

I had the same problem on 1.7.0

I go to the Magento "old versions" repository and downloaded the whole CMS

Then I replaced the whole existing js folder in that the fresh installation...it works :)