Magento 1.4 WYSIWYG editor with file upload in custom extension

Writing your first custom Magento extension is difficult; no one will argue that fact. Getting the benefits of the new TinyMCE WYSIWYG editor in the admin side is a fairly simple process, unless you require the ability to also upload files through it such as with the CMS. I use a helper method from Aheadworks Blog extension so you should install that first to make this easier. There may be a more elegant solution out there, but the following worked for me. For this example your extension is called “myext”:

1. in myext/Block/Adminhtml/myext/Tab/Form.php add
[php]
<?php try{
$config = Mage::getSingleton(‘cms/wysiwyg_config’)->getConfig(
array(
‘add_widgets’ => true,
‘add_variables’ => true));
$config->setData(Mage::helper(‘blog’)->recursiveReplace(‘/myext/’, ‘/’.(string)Mage::app()->getConfig()->getNode(‘admin/routers/adminhtml/args/frontName’).’/’, $config->getData()));
}
catch (Exception $ex) {
$config = null;
}

$myExtFieldset->addField(‘some_fieldname’, ‘editor’, array(
‘label’ => Mage::helper(‘myext’)->__(‘This is a field’),
‘required’ => false,
‘name’ => ‘some_fieldname’,
‘style’ => ‘width:98%; height:100px;’,
‘config’ => $config
)); ?>
[/php]
2. inside the editAction() method of myext/controllers/Adminhtml/MyextController.php
[php]
<?php if (Mage::getSingleton(‘cms/wysiwyg_config’)->isEnabled()) {
$this->getLayout()->getBlock(‘head’)->setCanLoadTinyMce(true);
} ?>
$this->renderLayout();
[/php]
3. and finally inside of app/design/adminhtml/default/yourtheme/layout/myext.xml you need to add some stylesheets and the Flex uploader
[php]
<myext_adminhtml_myext_edit>
<reference name="head">
<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="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>
</reference>
</myext_adminhtml_myext_edit>
[/php]
Some of this may be pretty sloppy, let me know! I did this on my first Magento extension ever so if anyone sees anyway I could minimize any of this let me know.

12 replies
  1. Andrew Frederick
    Andrew Frederick says:

    I am using Magento’s built-in wysiwyg and I’m enabling it in my custom extension. In your article what you’re doing is enabling a new extension and adding the .pdf filetype to the allowed file upload list for the CMS but this is not what I was trying to accomplish. Yes that can easily be done through the config file but from what I’ve found you cannot just turn on the wysiwyg in your own extension in a similar way. If there is a way I’d love to know about it.

    Reply
  2. Ryan
    Ryan says:

    I just tried your solution but it doesn’t seem to be working. I am stuck with this error on firebug

    tinyMCE is not defined
    tinymce.PluginManager.load…get’, this.config.widget_plugin_src);
    if (!tinyMCE.get(this.id)) {

    Please help!

    Reply
  3. shybovycha
    shybovycha says:

    There is no need for

    $config->setData(Mage::helper(‘news’)->recursiveReplace(‘/extname/’, ‘/’.(string)Mage::app()->getConfig()->getNode(‘admin/routers/adminhtml/args/frontName’).’/’, $config->getData()));

    I’ve used your code for a copy-and-paste fix and until i commented that line of code nothing got work at all.

    But anyway, thanks for an advice!

    Reply
  4. Asif
    Asif says:

    it dones not work until :

    Mage::getSingleton(‘cms/wysiwyg_config’)->getConfig(
    array(
    ‘files_browser_window_url’=> $this->getBaseUrl().’admin/cms_wysiwyg_images/index/’,
    )
    );

    Reply
  5. Rao
    Rao says:

    to make files upload other than images simply put this under section of your module’s etc/config.xml

    1
    1
    1
    1
    1

    this way one can upload pdf files (in my case) and than can link them files to the select text under the whysiwig editor of magneto.

    Reply
  6. Jeremy
    Jeremy says:

    Thanks! that helped a lot. I DID need the recursiveReplace and here is why. My module uses a different front name from the default (which is ‘admin’). Before adding the recursiveReplace I would get 404 errors because requests were made to /myfrontname/cms_wysiwyg_images instead of /admin/cms_wysiwyg_images. The replace fixed that

    Reply
  7. del
    del says:

    Hi
    I did something like this:

    [code 1=”$baseuri” 2=”=” 3=”$this->getBaseAdminUri();” 4=”$wysiwygConfig” 5=”=” 6=”Mage::getSingleton('cms/wysiwyg_config')” 7=”->getConfig(” 8=”array(” 9=”'add_variables'” 10=”=>” 11=”false,” 12=”'add_widgets'” 13=”=>” 14=”false,” 15=”'add_images'” 16=”=>” 17=”true,” 18=”'files_browser_window_url'” 19=”=>” 20=”$baseuri” 21=”.” 22=”'/admin/cms_wysiwyg_images/index/',” 23=”)” 24=”);” 25=”[/code}” 26=”[code” language=”}”]
    private function getBaseAdminUri()
    {
    $baseuri = Mage::helper(‘core/url’)->getHomeUrl();
    if (strpos($baseuri, "https") === FALSE)
    {
    $baseuri = str_replace(‘http’, ‘https’, $baseuri);
    }
    return $baseuri;
    }
    [/code]

    and next

    [code]
    $fieldset->addField("nxs_seo_description", "editor", array(
    "label" => Mage::helper("seo")->__("Seo text"),
    "required" => false,
    ‘style’ => ‘height:300px;width:50%;’,
    ‘config’ => $wysiwygConfig,
    ‘wysiwyg’ => true,
    "name" => "nxs_seo_description",
    ));
    [/code]

    Reply
  8. David Fabreguette
    David Fabreguette says:

    For those who can struggle with magento css file, it looks like it was moved to “/skin/adminhtml/default/default/lib/prototype/windows/themes/magento.css”.

    The line ” js_cssprototype/windows/themes/magento.css” should be replaced with “lib/prototype/windows/themes/magento.css”.

    Hope it can help anyone.

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *