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.
Why not just use Magento’s built-in wysiwyg editor and modify it to allow you to upload other file types? There’s a very easy way to do it (properly) with a light-weight module. http://prattski.com/2011/01/10/magento-allow-other-file-types-in-wysiwyg-editor/
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.
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!
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!
it dones not work until :
Mage::getSingleton(‘cms/wysiwyg_config’)->getConfig(
array(
‘files_browser_window_url’=> $this->getBaseUrl().’admin/cms_wysiwyg_images/index/’,
)
);
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.
sorry it seems like it won’t let xml code pass in the answer box here. or i don’t know my way around this 😀
check this extension for Magento
http://extensions.magefast.com/additional-type-of-files-for-wysiwyg-editor.html
For upload PDF ZIP MP3 DOC ….. and other file formats to WYSIWYG EDITOR
I am allowing Magefast’s link above in hopes that his extension is a simpler solution. If so, post your findings back here.
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
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]
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.