Search code examples
magentowysiwyg

Magento WYSIWYG editor button not working


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?


Solution

  • 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>