How to Configure TinyMCE4 Toolbar in Magento 2.3.x

How to Configure TinyMCE4 Toolbar in Magento 2.3.x

TinyMCE is a rich-text WYSIWYG editor. It is one of the important elements that admin use frequently in Magento 2 stores. It facilitates the admin to convert HTML text area fields or other HTML elements to editor instances.

However, with the recent Magento 2.3.x versions, the layout of TinyMCE4 toolbar has changed. The default TinyMCE4 toolbar in Magento 2.3.x versions do not include options like font color, background color, code, color picker, etc. These are the essential options that admin may require often.

The default editor that you get with the Magento 2.3.x versions looks something like this:

The Default TinyMCE4 Editor in Magento 2.3.x

Hence, I have come up with a programmatic solution to configure TinyMCE4 toolbar in Magento 2.3.x versions.

This solution uses the method to create plugin in Magento 2 which I have already given earlier.

Method to Configure TinyMCE4 Toolbar in Magento 2.3.x:

  1. Create registration.php file in app\code\[Vendor]\[Namespace]\
  2. Create module.xml file in app\code\[Vendor]\[Namespace]\etc
  3. Create di.xml file in app\code\[Vendor]\[Namespace]\etc
  4. Create Config.php in [Vendor]\[Namespace]\Plugin\

That’s it.

After implementing this method, you can use the editor as shown below:

After Configuring TinyMCE4 Editor in Magento 2.3.x

Quite helpful options will now be available in your backend WYSIWYG editor!

If you still find issues with this method, please mention them in the Comments section below and I’d be happy to help 🙂

I’d be very grateful if you helped share this helpful post on social media to fellow developers!

Thanks!

5
(based on 10 Reviews)

Sanjay is a co-founder at Meetanshi. He is a certified Magento developer who loves creating Magento E-commerce solutions. When he is not engrossed with anything related to Magento, he loves to play cricket.

Leave a Reply