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

3 Answers 3


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'),
            {title : 'Source Code', block : 'code', classes : 'prettyprint', exact: true}


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


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.

  • Dear #Woolfie, this is looking promising :) i think this is exactly what i needed. I will let you know.
    – user15151
    Feb 24, 2015 at 15:09
  • HI Woolfie, how to include more than one style? thanks?
    – user15151
    Feb 24, 2015 at 18:06
  • 1
    See the linked docs: style_formats: [ {title: 'Bold text', inline: 'b'}, {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, {title: 'Example 1', inline: 'span', classes: 'example1'}, {title: 'Example 2', inline: 'span', classes: 'example2'}, {title: 'Table styles'}, {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} ] Feb 25, 2015 at 10:04
  • 1
    -1 for editing core files
    – Simon
    Dec 17, 2015 at 11:26
  • 1
    @Simon I did start my answer saying that this was not The Correct Way. The person asking the question seemed happy with the solution even though it is not perfect - it just gets the job done rather than follow every coding standard and design principle to the letter. Sometimes results matter in the real world, not coding perfection. Consequently I consider you to be jolly miserly in snubbing my accepted answer without providing a better answer of your own. Can you share with the world how to do this without editing core files? Dec 17, 2015 at 15:16

Those styles are auto-detected based on the page content and loaded stylesheets.

Unfortunately, Magento does not make it simple to extend this. There's an article by Alan Storm that describes one way to inject your own CSS:


Essentially, it comes down to intercepting the bootstrapping process of TinyMCE, grabbing the editor instance, and loading your own CSS, eg:

// Loads multiple CSS files into the current document

Ref: http://www.tinymce.com/wiki.php/API3:method.tinymce.dom.DOMUtils.loadCSS

If you're looking for something pre-rolled, I wrote an extension that I revise from time to time here: https://github.com/vbuck/rootd-tinymce

It essentially does what you're asking for.


Yes, You can achieve this using custom module.

NOTE: Solution is for Magento 2

1) Create custom module with below directory structure: Addweb - Wysiwyg - etc - Plugin

2) Create one file called "di.xml" with below code (i.e. Addweb/Wysiwyg/etc/di.xml) inside "etc" directory of your custom module.

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="\Magento\Cms\Model\Wysiwyg\Config">
        <plugin name="add_wysiwyg_data" type="\Addweb\Wysiwyg\Plugin\WysiwygConfig" sortOrder="10" />

3) Create one file called "WysiwygConfig.php" with below code (i.e. Addweb/Wysiwyg/Plugin/WysiwygConfig.php) inside "Plugin" directory of your custom module.


namespace Addweb\Wysiwyg\Plugin;

class WysiwygConfig {
    public function afterGetConfig($subject, \Magento\Framework\DataObject $config)
        $styleArray = [
            'Hero - Image' => 'hero__image',
            'Hero - Heading' => 'hero__heading',
            'Hero - Action Button' => 'hero__primary-action'

        $styles = array_map(function($title, $class) {
            return "{$title}={$class}; ";
        }, array_keys($styleArray), array_values($styleArray));

        $config->addData(["settings" => ["theme_advanced_styles" => implode("; ", $styles)]]);

        return $config;

4) Clear cache and refresh admin page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.