Configure the TinyMCE editor
You can extend and fully customize the TinyMCE editor to match the style and look-and-feel of your custom theme. This enables richer content editing capabilities and ensures that content created in the Page Builder WYSIWYG or CMS content is seamlessly integrated and consistent with your other content.
The configuration of the TinyMCE editor is built by the CompositeConfigProvider
class.
CompositeConfigProvider
loads the required configuration by adapters specified in the admin configuration General > Content Management >WYSIWYG Options > WYSIWYG Editor
. This class is the configuration provider and aggregates the data in the array.
For example, Magento\Cms\Model\Wysiwyg\CompositeConfigProvider
of Magento_Cms module:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<type name="Magento\Cms\Model\Wysiwyg\CompositeConfigProvider">
<arguments>
<argument name="variablePluginConfigProvider" xsi:type="array">
<item name="default" xsi:type="string">Magento\Variable\Model\Variable\ConfigProvider</item>
</argument>
<argument name="widgetPluginConfigProvider" xsi:type="array">
<item name="default" xsi:type="string">Magento\Widget\Model\Widget\Config</item>
</argument>
<argument name="wysiwygConfigPostProcessor" xsi:type="array">
<item name="default" xsi:type="string">Magento\Cms\Model\Wysiwyg\DefaultConfigProvider</item>
</argument>
<argument name="galleryConfigProvider" xsi:type="array">
<item name="default" xsi:type="string">Magento\Cms\Model\Wysiwyg\Gallery\DefaultConfigProvider</item>
</argument>
</arguments>
</type>
Or the Magento_PageBuilder module:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<type name="Magento\Cms\Model\Wysiwyg\CompositeConfigProvider">
<arguments>
<argument name="variablePluginConfigProvider" xsi:type="array">
<item name="Magento_PageBuilder/pageBuilderAdapter" xsi:type="string">Magento\Cms\Model\WysiwygDefaultConfig</item>
</argument>
<argument name="widgetPluginConfigProvider" xsi:type="array">
<item name="Magento_PageBuilder/pageBuilderAdapter" xsi:type="string">Magento\Cms\Model\WysiwygDefaultConfig</item>
</argument>
<argument name="wysiwygConfigPostProcessor" xsi:type="array">
<item name="Magento_PageBuilder/pageBuilderAdapter" xsi:type="string">Magento\Cms\Model\WysiwygDefaultConfig</item>
<item name="default" xsi:type="string">Magento\PageBuilder\Model\Wysiwyg\DefaultConfigProvider</item>
</argument>
<argument name="galleryConfigProvider" xsi:type="array">
<item name="Magento_PageBuilder/pageBuilderAdapter" xsi:type="string">Magento\Cms\Model\WysiwygDefaultConfig</item>
</argument>
</arguments>
</type>
The DefaultConfigProvider
class returns the data required to render the TinyMCE editor.
From the example, the class Magento\PageBuilder\Model\Wysiwyg\DefaultConfigProvider
overrides the existing configuration provided by the Magento_CMS
module.
Extending the TinyMCE editor
When extending the TinyMCE editor it is necessary to add the PageBuilder module to the load order of the custom module by adding the following to the module.xml
file.
1
2
3
<sequence>
<module name="Magento_Pagebuilder"/>
</sequence>
To customize the TinyMCE editor present in Page Builder, revise the di.xml
file, adding the configuration settings as an argument to Magento\PageBuilder\Model\Wysiwyg\DefaultConfigProvider
.
The following code is an example of the configuration settings in the di.xml
file that determine the font sizes available for selection. Then, it adds a paragraph menu option associated with the <p>
tag:
1
2
3
4
5
6
7
8
9
10
11
12
13
<type name="Magento\PageBuilder\Model\Wysiwyg\DefaultConfigProvider">
<arguments>
<argument name="additionalSettings" xsi:type="array">
<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="style_formats" xsi:type="array">
<item name="paragraph" xsi:type="array">
<item name="title" xsi:type="string">Paragraph</item>
<item name="block" xsi:type="string">p</item>
</item>
</item>
</argument>
</arguments>
</type>
Once you have edited the di.xml
file, you can apply custom styling for the settings you implemented in the related CSS file.
The config of the TinyMCE editor can be extended with a plugin.
Configuration providers are classes with a getConfig()
method that return the configuration for a specific entity.
For instance, in the Magento\Cms\Model\Wysiwyg\DefaultConfigProvider
class, the getConfig()
method
adds the additional configuration and enables a list of plugins:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
* Class DefaultConfigProvider returns data required to render tinymce4 editor
*/
class DefaultConfigProvider implements \Magento\Framework\Data\Wysiwyg\ConfigProviderInterface
{
...
/**
* @inheritDoc
*/
public function getConfig(\Magento\Framework\DataObject $config) : \Magento\Framework\DataObject
{
$config->addData([
'tinymce4' => [
'toolbar' => 'formatselect | bold italic underline | alignleft aligncenter alignright | '
. 'bullist numlist | link table charmap',
'plugins' => implode(
' ',
[
'advlist',
'autolink',
'lists',
'link',
'charmap',
'media',
'noneditable',
'table',
'contextmenu',
'paste',
'code',
'help',
'table'
]
),
'content_css' => $this->assetRepo->getUrl('mage/adminhtml/wysiwyg/tiny_mce/themes/ui.css')
]
]);
return $config;
}
}
In this case, the Magento\Cms\Model\Wysiwyg\Gallery\DefaultConfigProvider
class enables the image plugin.
See a list of available TinyMCE settings on their website.
The following example shows how you can extend the TinyMCE editor configuration by creating a plugin for DefaultConfigProvider
which extends the getConfig()
method of the original class.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
...
/**
* @param \Magento\Cms\Model\Wysiwyg\Gallery\DefaultConfigProvider $subject
* @param \Magento\Framework\DataObject $result
* @return \Magento\Framework\DataObject $result
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
public function afterGetConfig(\Magento\Cms\Model\Wysiwyg\Gallery\DefaultConfigProvider $subject, \Magento\Framework\DataObject $result)
{
$result->addData([
'tinymce4' => [
...
]
]);
return $result;
...
}