Magento 2.3 - TinyMCE4 Toolbar and Plugin Configuration
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.