6

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!

enter image description here enter image description here

7

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: 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.

  • 1
    Thank you, Mike, for the solution, it works well. Based on your suggestions we have created a simple Magento 2 module, that can be installed via the composer composer require magefan/module-wysiwyg-advanced The source code can be found at Github: github.com/magefan/module-wysiwyg-advanced – lemk0 Jun 20 at 14:33
  • 1
    I'm happy this post has been helpful to others and I'm sure your composer implementation will be a big help too! Hopefully, this Magento editor issue will be improved upon in a future update :) – Mike Dubs Jun 20 at 14:49
  • 1
    We also added a few fixes to your original code. The latest code can be found at github repo of magefan/module-wysiwyg-advanced – lemk0 Jun 26 at 18:24
  • 1
    Thanks for the additional fixes. I edited my answer to contain the link to the Magefan Github Repo :) @lemk0 – Mike Dubs Jun 26 at 20:31
  • 1
    It works.... thanks mike – zuber bandi Jul 1 at 13:24
0

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

  • Would you agree or disagree with the after plugin approach that is in my proposed answer? Thank you for your helpful feedback. :) – Mike Dubs Feb 28 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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