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.
3 Answers
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. Feb 24, 2015 at 15:09
-
-
1See 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@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
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.
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.