Ttdfjt

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!

Potential 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="MagentoUiComponentWysiwygConfigInterface">
 <plugin name="project_customtinymce_config"
 type="ProjectCustomtinymcePluginConfig"
 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
MagentoFrameworkComponentComponentRegistrar::register(
 MagentoFrameworkComponentComponentRegistrar::MODULE,
 'Project_Customtinymce',
 __DIR__
);

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

<?php

namespace ProjectCustomtinymcePlugin;


class Config


 protected $activeEditor;

 public function __construct(MagentoUiBlockWysiwygActiveEditor $activeEditor)
 
 $this->activeEditor = $activeEditor;
 

 /**
 * Return WYSIWYG configuration
 *
 * @param MagentoUiComponentWysiwygConfigInterface $configInterface
 * @param MagentoFrameworkDataObject $result
 * @return MagentoFrameworkDataObject
 */
 public function afterGetConfig(
 MagentoUiComponentWysiwygConfigInterface $configInterface,
 MagentoFrameworkDataObject $result
 ) 

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

 // Is the current wysiwyg tinymce v4?
 if(strpos($editor,'tinymce4Adapter')) fontsizeselect 
 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.

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