WYSIWYG Custom Styles in Magento

wysiwyg

Is it possible to add custom styles and classes in drop down menu in wysiwyg editor in magento! I have enclosed the picture for better explanation.
enter image description here

Best Answer

Sometimes it is not always necessary to extend Magento as per The Correct Way. In this case, if you simply want to customise the editor and get back to being focused on the product catalogue, you can simply edit js/mage/adminhtml/wysiwyg/tiny_mce/setup.js and add your style selection in var settings (line 97):

    var settings = {
        mode : (mode != undefined ? mode : 'none'),
        style_formats:[
            {title : 'Source Code', block : 'code', classes : 'prettyprint', exact: true}
        ],

        ...

This will now mean you have one style, 'Source Code'.

http://www.tinymce.com/wiki.php/Configuration:style_formats

Next time that Magento is upgraded you will lose your customisations. When you upgrade you can simply put the styles back in or you can put together a whole module load of stuff to do this The Proper Magento Way.

Related Solutions

Magento – Add a wysiwyg editor in custom category attribute

The wysiwyg editor is available on the textarea type input. So if you are using the installer script to add your attribute for example use these options. Don't forget to append the other options you might need there like label.

$installer->addAttribute(Mage_Catalog_Model_Category::ENTITY, 'your_attribute', array(
   [...]
   'type' => 'text',
   'input' => 'textarea',
   'wysiwyg_enabled'   => true,
   [...]
));

Magento – WYSIWYG TinyMCE Editor Integration

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);

Best Answer

Related Solutions

Magento – Add a wysiwyg editor in custom category attribute

Magento – WYSIWYG TinyMCE Editor Integration

Related Topic