Magento 2.4.5 TinyMCE 5 toolbar configuration to remove plugins

Question

I want to configure Tinymce 5 toolbar plugins.

till now i have tried below things.

app/code/VendorName/CmsEditor/etc/adminhtml/di.xml

<?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="cms_wysiwyg_editor_update_config" type="vendorName\CmsEditor\Plugin\Model\Wysiwyg\UpdateConfig" sortOrder="100"/>
    </type>

    <type name="Magento\Cms\Model\Wysiwyg\CompositeConfigProvider">
        <arguments>
            <argument name="variablePluginConfigProvider" xsi:type="array">
                <item name="default" xsi:type="string">Magento\Cms\Model\WysiwygDefaultConfig</item>
            </argument>
            <argument name="widgetPluginConfigProvider" xsi:type="array">
                <item name="default" xsi:type="string">Magento\Cms\Model\WysiwygDefaultConfig</item>
            </argument>
            <argument name="wysiwygConfigPostProcessor" xsi:type="array">
                <item name="default" xsi:type="string">VendorName\CmsEditor\Model\Wysiwyg\DefaultConfigProvider</item>
            </argument>
            <argument name="galleryConfigProvider" xsi:type="array">
                <item name="default" xsi:type="string">Magento\Cms\Model\WysiwygDefaultConfig</item>
            </argument>
        </arguments>

    </type>

    <type name="VendorName\CmsEditor\Model\Wysiwyg\DefaultConfigProvider">
        <arguments>
            <argument name="additionalSettings" xsi:type="array">
                <item name="fixed_toolbar_container" xsi:type="string">.pagebuilder-content-type</item>
                <item name="fontsize_formats" xsi:type="string">10px 12px 14px 16px 18px 20px 24px 26px 28px 32px 34px 36px 38px 40px 42px 48px 52px 56px 64px 72px</item>
                <item name="lineheight_formats" xsi:type="string">10px 12px 14px 16px 18px 20px 24px 26px 28px 32px 34px 36px 38px 40px 42px 48px 52px 56px 64px 72px</item>
                <item name="style_formats" xsi:type="array">
                    <item name="paragraph" xsi:type="array">
                        <item name="title" xsi:type="string">Paragraphs</item>
                        <item name="block" xsi:type="string">p</item>
                    </item>
                    <item name="heading1" xsi:type="array">
                        <item name="title" xsi:type="string">Heading 1</item>
                        <item name="block" xsi:type="string">h1</item>
                    </item>
                    <item name="heading2" xsi:type="array">
                        <item name="title" xsi:type="string">Heading 2</item>
                        <item name="block" xsi:type="string">h2</item>
                    </item>
                    <item name="heading3" xsi:type="array">
                        <item name="title" xsi:type="string">Heading 3</item>
                        <item name="block" xsi:type="string">h3</item>
                    </item>
                    <item name="heading4" xsi:type="array">
                        <item name="title" xsi:type="string">Heading 4</item>
                        <item name="block" xsi:type="string">h4</item>
                    </item>
                    <item name="heading5" xsi:type="array">
                        <item name="title" xsi:type="string">Heading 5</item>
                        <item name="block" xsi:type="string">h5</item>
                    </item>
                    <item name="heading6" xsi:type="array">
                        <item name="title" xsi:type="string">Heading 6</item>
                        <item name="block" xsi:type="string">hi6</item>
                    </item>
                    <item name="bold" xsi:type="array">
                        <item name="title" xsi:type="string">Bold</item>
                        <item name="block" xsi:type="string">bold</item>
                    </item>
                    <item name="italic" xsi:type="array">
                        <item name="title" xsi:type="string">Italic</item>
                        <item name="block" xsi:type="string">italic</item>
                    </item>
                </item>
            </argument>
        </arguments>
    </type>
</config>

app/code/VendorName/CmsEditor/Model/Wysiwyg/DefaultConfigProvider.php

<?php

declare(strict_types=1);

namespace VendorName\CmsEditor\Model\Wysiwyg;

use Magento\Framework\Data\Wysiwyg\ConfigProviderInterface;
use Magento\Framework\DataObject;
use Magento\Framework\View\Asset\Repository;

/**
 * This DefaultConfigProvider overrides existing configuration provided from the cms module
 */
class DefaultConfigProvider implements ConfigProviderInterface
{
    private Repository $assetRepo;

    private array $additionalSettings;

    /**
     * @param Repository $assetRepo
     * @param array $additionalSettings
     */
    public function __construct(
        Repository $assetRepo,
        array      $additionalSettings
    )
    {
        $this->assetRepo = $assetRepo;
        $this->additionalSettings = $additionalSettings;
    }

    /**
     * Returns configuration data
     *
     * @param DataObject $config
     * @return DataObject
     */
    public function getConfig(DataObject $config): DataObject
    {
        //echo "</pre>"; print_r($this->additionalSettings); exit;
        $config->addData(
            [
                'tinymce' => [
                    'toolbar' => 'undo redo | styleselect | fontsizeselect | lineheight | ' .
                        '| bold italic | numlist bullist ' .
                        '| link charmap',

                    'plugins' => implode(
                        ' ',
                        [
                            'advlist',
                            'autolink',
                            'lists',
                            'link',
                            'charmap',
                            'noneditable',
                            'paste'
                        ]
                    ),
                    'content_css' => [
                        $this->assetRepo->getUrl('mage/adminhtml/wysiwyg/tiny_mce/themes/ui.css'),
                        $this->assetRepo->getUrl('Magento_PageBuilder::css/source/form/element/tinymce.css')
                    ]
                ],
                'settings' => $this->additionalSettings
            ]
        );
        return $config;
    }
}

app/code/VendorName/CmsEditor/Plugin/Model/Wysiwyg/UpdateConfig.php

<?php
declare(strict_types=1);

namespace VendorName\CmsEditor\Plugin\Model\Wysiwyg;

use Magento\Backend\Model\UrlInterface;
use Magento\Cms\Model\Wysiwyg\CompositeConfigProvider;
use Magento\Cms\Model\Wysiwyg\Config;
use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Framework\App\ObjectManager;
use Magento\Framework\DataObject;
use Magento\Framework\Filesystem;
use Magento\Framework\View\Asset\Repository;

/**
 * Wysiwyg Config for Editor HTML Element extended
 *
 * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
 */
class UpdateConfig
{
    protected Repository $assetRepo;

    protected UrlInterface $backendUrl;

    protected Filesystem $filesystem;

    private CompositeConfigProvider $configProvider;

    /**
     * @param UrlInterface $backendUrl
     * @param Repository $assetRepo
     * @param Filesystem $filesystem
     * @param CompositeConfigProvider|null $configProvider
     * @SuppressWarnings(PHPMD.ExcessiveParameterList)
     */
    public function __construct(
        UrlInterface            $backendUrl,
        Repository              $assetRepo,
        Filesystem              $filesystem,
        CompositeConfigProvider $configProvider = null
    )
    {
        $this->backendUrl = $backendUrl;
        $this->assetRepo = $assetRepo;
        $this->filesystem = $filesystem;
        $this->configProvider = $configProvider ?: ObjectManager::getInstance()
            ->get(CompositeConfigProvider ::class);
    }

    /**
     * Return Wysiwyg config as \Magento\Framework\DataObject
     *
     * Config options description:
     *
     * enabled:                 Enabled Visual Editor or not
     * hidden:                  Show Visual Editor on page load or not
     * use_container:           Wrap Editor contents into div or not
     * no_display:              Hide Editor container or not (related to use_container)
     * translator:              Helper to translate phrases in lib
     * files_browser_*:         Files Browser (media, images) settings
     * encode_directives:       Encode template directives with JS or not
     *
     * @param Config $subject
     * @param callable $proceed
     * @param array $data Object constructor params to override default config values
     * @return DataObject
     */
    public function aroundGetConfig(Config $subject, callable $proceed, array $data = []): DataObject
    {
        $config = new DataObject();

        $config->setData(
            [
                'enabled' => $subject->isEnabled(),
                'hidden' => $subject->isHidden(),
                'baseStaticUrl' => $this->assetRepo->getStaticViewFileContext()->getBaseUrl(),
                'baseStaticDefaultUrl' => str_replace('index.php/', '', $this->backendUrl->getBaseUrl())
                    . $this->filesystem->getUri(DirectoryList::STATIC_VIEW) . '/',
                'directives_url' => $this->backendUrl->getUrl('cms/wysiwyg/directive'),
                'use_container' => false,
                'add_variables' => false,
                'add_widgets' => false,
                'no_display' => false,
                'add_directives' => true,
                'width' => '100%',
                'height' => '500px',
                'plugins' => [],
            ]
        );

        $config->setData('directives_url_quoted', preg_quote($config->getData('directives_url')));

        if (is_array($data)) {
            $config->addData($data);
        }

        if ($config->getData('add_widgets')) {
            $this->configProvider->processWidgetConfig($config);
        }

        if ($config->getData('add_variables')) {
            $this->configProvider->processVariableConfig($config);
        }

        return $this->configProvider->processWysiwygConfig($config);
    }
}

So by doing this till now i have managed to remove many plugins as below but i want to remove this "Inline >> Strikethrough/Superscript/Subscript, Blocks and Align options"

any help would be appreciated. Thanks.

Answer 1

This worked for me, I was able to add or remove plugins and change the layout of the toolbar:

di.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
    <type name="Magento\Ui\Component\Wysiwyg\ConfigInterface">
        <plugin disabled="false" name="vendor_package_plugin_magento_ui_component_wysiwyg_configinterface" sortOrder="10" type="Vendor\Package\Plugin\Magento\Ui\Component\Wysiwyg\ConfigInterface"/>
    </type>
</config>

ConfigInterface.php

<?php

namespace Vendor\Package\Plugin\Magento\Ui\Component\Wysiwyg;

class ConfigInterface
{
    /**
    * @param \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface
    * @param \Magento\Framework\DataObject $result
    * @return \Magento\Framework\DataObject
    */
    public function afterGetConfig(
        \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface,
        \Magento\Framework\DataObject $result
    ) {
        $settings = $result->getData('settings');
        if (!is_array($settings)) {
            $settings = [];
        }

        $settings['plugins'] = 'advlist autolink lists link charmap media noneditable table paste code help table image magentowidget magentovariable';

        // $settings['toolbar1'] = 'undo redo | styleselect | fontsizeselect | lineheight | forecolor backcolor | bold italic underline | alignleft aligncenter alignright | numlist bullist | link image table charmap | magentowidget | magentovariable';

        // Custom toolbar contents
        $settings['toolbar1'] = 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline | alignleft aligncenter alignright | bullist | link image media table';

        $result->setData('settings', $settings);

        return $result;
    }
}

Answer 2

Thank you so much for your post. I found it incredibly helpful as I was struggling with the overwhelming number of toolbar menus in Magento 2's TinyMCE. I followed your instructions and was able to apply a simplified version immediately. This post is absolutely fantastic!