WYSIWYG TinyMCE Editor Integration

Question

I have integrated WYSIWYG Editor using this tutorial. I can see it in my custom module, but when I try to insert variable it gives me following error in console

Error: ReferenceError: widgetTools is not defined
Source File: http://mywebsite.com/js/mage/adminhtml/wysiwyg/tiny_mce/plugins/magentowidget/editor_plugin.js
Line: 44

There is also another error when I try to insert widget,

Error: ReferenceError: widgetTools is not defined
Source File: http://mywebsite.com/js/mage/adminhtml/wysiwyg/tiny_mce/plugins/magentowidget/editor_plugin.js
Line: 44

Could anyone pls guide me on how to integrate WYSIWYG editor in backend custom module as well as frontend without having console errors.

Also how to add necessary WYSIWYG (TinyMCE) JS files to insert widgets, variables, images and other media types ?

Thanks.

Answer 1

You will need to include the wysiwyg javascript files.

I think the lines of code you need are.

<script type="text/javascript" src="<?php echo $this->getJsUrl() ?>tiny_mce/tiny_mce.js"></script>

And

<action method="addItem"><type>js</type><name>mage/adminhtml/wysiwyg/tiny_mce/setup.js</name><params/><if/><condition>can_load_tiny_mce</condition></action>

These should be set by default on normal adminhtml pages as long as you turn on the editor. To do this you can add the following to your block class in the _prepareLayout function.

$this->getLayout()->getBlock('head')->setCanLoadTinyMce(true);

Answer 2

Finally after long exploring a found a solution for this.
actually these errors occur because js is not loading properly, so update your layout by a local.xml and add the following code.

<?xml version="1.0"?>
<layout>
    <frontname_adminhtml_index_edit>
        <update handle="editor"/>
        <reference name="head">
            <action method="setCanLoadTinyMce">
                <load>1</load>
            </action>
            <action method="setCanLoadExtJs">
                <flag>1</flag>
            </action>
            <action method="addJs">
                <script>mage/adminhtml/variables.js</script>
            </action>
            <action method="addJs">
                <script>mage/adminhtml/wysiwyg/widget.js</script>
            </action>
            <action method="addJs">
                <script>lib/flex.js</script>
            </action>
            <action method="addJs">
                <script>lib/FABridge.js</script>
            </action>
            <action method="addJs">
                <script>mage/adminhtml/flexuploader.js</script>
            </action>
            <action method="addJs">
                <script>mage/adminhtml/browser.js</script>
            </action>
            <action method="addJs">
                <script>prototype/window.js</script>
            </action>
            <action method="addItem">
                <type>js_css</type>
                <name>prototype/windows/themes/default.css</name>
            </action>
<!--            <action method="addItem">
                <type>js_css</type>
                <name>prototype/windows/themes/magento.css</name>
            </action>-->
            <action method="addCss">
                <stylesheet>lib/prototype/windows/themes/magento.css</stylesheet>
            </action>
        </reference>
    </frontname_adminhtml_index_edit>
</layout>

After this view the code by pressing cltr+u and find if these are loaded properly or not.And if not try changing

    </frontname_adminhtml_index_edit>

properly. Hope this will resolve!