Text editor or WYSIWYG on Magento

How to use WYSIWYG editor (TinyMCE) in custom Admin Magento Module?
Enable pdf extension on WYSIWYG for Magento?

How to use WYSIWYG editor (TinyMCE) in custom Admin Magento Module?

1> Including TincyMCE in Head

Add the following function in your Adminhtml Edit Class (MagePsycho_Demomodule_Block_Adminhtml_Demomodule_Edit):

protected function _prepareLayout() {

    parent::_prepareLayout();

    if (Mage::getSingleton('cms/wysiwyg_config')->isEnabled()) {

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

    }

}

2> Enabling in Form Field

Add the following content field in your Adminhtml Form class (MagePsycho_Demomodule_Block_Adminhtml_Demomodule_Edit_Tab_Form):

$fieldset->addField('content', 'editor', array(

    'name'      => 'content',

    'label'     => Mage::helper('demomodule')->__('Content'),

    'title'     => Mage::helper('demomodule')->__('Content'),

    'style'     => 'height:15em',

    'config'    => Mage::getSingleton('cms/wysiwyg_config')->getConfig(),

    'wysiwyg'   => true,

    'required'  => false,

));

Enable pdf extension on WYSIWYG for Magento?




Came across other day the need to upload pdf files through the WYSIWYG tool on Magento. I’ve checked the native functionality and it allows by default only images (jpg, png, gif).

So, to change the initial behavior I opened the file app/code/core/Mage/Cms/etc/config.xml, which defines the filetypes that can be uploaded, and around line 110 I’ve added the line <pdf>1</pdf> as below:

<allowed>
  <jpg>1</jpg>
  <jpeg>1</jpeg>
  <png>1</png>
  <gif>1</gif>
  <pdf>1</pdf>
</allowed>

Clean your Cache Management > Configuration, then you can open again your WYSIWYG (which can be done through CMS > Pages > Select One Page > Tab Content) and click on the bottom “Insert Image” (as below) and you show be able to upload your pdfs by now.

You should also change the your code as below if you want the Image Button on the WYSIWYG enable:

<image_allowed>
  <jpg>1</jpg>
  <jpeg>1</jpeg>
  <png>1</png>
  <gif>1</gif>
  <pdf>1</pdf>
</image_allowed>

This changes will affect the button in the image: