WYSIWYG custom styles

Question

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.

Answer 1

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.

Answer 2

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:

http://alanstorm.com/magento_html5_tinymce

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
tinymce.DOM.loadCSS('somepath/some.css,somepath/someother.css');

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.

Answer 3

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" />
    </type>
</config>

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

<?php

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.