5

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

0

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.

  • Dear #Woolfie, this is looking promising :) i think this is exactly what i needed. I will let you know. – user15151 Feb 24 '15 at 15:09
  • HI Woolfie, how to include more than one style? thanks? – user15151 Feb 24 '15 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'} ] – Henry's Cat Feb 25 '15 at 10:04
  • this is great and exactly what i needed. thanks a lot man – user15151 Feb 26 '15 at 11:09
  • 1
    -1 for editing core files – Simon Dec 17 '15 at 11:26
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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