2

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"

enter image description here

any help would be appreciated. Thanks.

2 Answers 2

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;
    }
}
0

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!

1
  • Thank you for your appreciation. If you found this post helpful then you can upvote the post. Commented Jun 6, 2023 at 8:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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