Magento 2.3 - TinyMCE4 Toolbar and Plugin Configuration

Question

Updated to Magento 2.3 which includes the TinyMCE v4 editor, but the default layout does not include options like "Color Picker" or "Code".

How should I appropriately modify the tinymce.init config to include these features? I tried modifying di.xml as the devdocs described, but I did not see any changes after setup:upgrade and clearing cache. (https://devdocs.magento.com/guides/v2.3/ui_comp_guide/components/wysiwyg/configure-tinymce-editor.html)

Perhaps I need to override this file?

From: lib/web/mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter.js
... 
plugins: this.config.tinymce4.plugins,
toolbar: this.config.tinymce4.toolbar,
... 

Any guidance or feedback would be greatly appreciated. Thank you!

Answer 1

UPDATE: Per Magefan's below comments, you can install this editor fix via composer. Instructions in their Github Repo.

---

Original answer: Create an afterGetConfig plugin to configure Magento 2.3's TinyMCE v4.6.4 WYSIWYG editor

• My below solution adds the menubar, font color, background color, image selector, and code buttons to a "loaded" toolbar

1) Create the directory [app/code/vendor/module]: app/code/Project/Customtinymce

2) Create app/code/Project/Customtinymce/etc/di.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <type name="Magento\Ui\Component\Wysiwyg\ConfigInterface">
            <plugin name="project_customtinymce_config"
                    type="Project\Customtinymce\Plugin\Config"
                    sortOrder="10"/>
        </type>
</config>

3) Create app/code/Project/Customtinymce/etc/module.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Project_Customtinymce" setup_version="0.1.0"/>
</config>

4) Create app/code/Project/Customtinymce/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Project_Customtinymce',
    __DIR__
);

5) Create the after plugin app/code/Project/Customtinymce/Plugin/Config.php:

<?php

namespace Project\Customtinymce\Plugin;


class Config
{

 protected $activeEditor;

    public function __construct(\Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor)
    {
        $this->activeEditor = $activeEditor;
    }

    /**
     * Return WYSIWYG configuration
     *
     * @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
    ) {

        // Get current wysiwyg adapter's path
        $editor = $this->activeEditor->getWysiwygAdapterPath();

        // Is the current wysiwyg tinymce v4?
        if(strpos($editor,'tinymce4Adapter')){

        if (($result->getDataByPath('settings/menubar')) || ($result->getDataByPath('settings/toolbar')) || ($result->getDataByPath('settings/plugins'))){
            // do not override ui_element config (unsure if this is needed)
            return $result;
        }

        $settings = $result->getData('settings');

        if (!is_array($settings)) {
            $settings = [];
        }

        // configure tinymce settings 
        $settings['menubar'] = true;
        $settings['toolbar'] = 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | image | code';
        $settings['plugins'] = 'textcolor image code';

        $result->setData('settings', $settings);
        return $result;
        }
        else{ // don't make any changes if the current wysiwyg editor is not tinymce 4
            return $result;
        }
    }
}

After screenshot:

Please see TinyMCE v4 Toolbar Resources for more toolbar and plugin options.

I hope this plugin helps others! Please add your helpful feedback to improve this answer.

Answer 2

You can see how magento implements wysiwyg config css for tinymce3 in module Magento_Tinymce3 But keep in minds this module will be remove from core soon as soon as all functions compatible with tinymce4 and magento implements extensions points allow to integrate any other editors like ckeditor

In future the approach to integrate new editor will be use php code plugins with Modifier pool dependency injection mechanism