Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Commit 055108a

Browse files
doboothdobooth
authored
Merge pull request #6681 from DenisSaltanahmedov/TinyMCE-configuring-info
magento/devdocs#:5185 Adding more information about configuring TinyMCE
2 parents 5dc2e09 + e7e0335 commit 055108a

File tree

1 file changed

+129
-6
lines changed

1 file changed

+129
-6
lines changed

‎src/guides/v2.3/ui_comp_guide/components/wysiwyg/configure-tinymce-editor.md

Lines changed: 129 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,62 @@ subgroup: howtos
33
group: ui-components-guide
44
title: Configure the TinyMCE editor
55
---
6+
67
You can extend and fully customize the TinyMCE editor to match the style and look-and-feel of your custom theme.
7-
This enables richer content editing capabilities and ensures that content created in the Page Builder <span term-uuid="98cf4fd5-59b6-4610-9c1f-b84c8c0abd97" class="glossary-term" data-toggle="popover">WYSIWYG</span> is seamlessly integrated and consistent with your other content.
8+
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.
9+
10+
The configuration of the TinyMCE editor is built by the `CompositeConfigProvider` class.
11+
`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.
12+
For example, `Magento\Cms\Model\Wysiwyg\CompositeConfigProvider` of Magento_Cms module:
13+
14+
```xml
15+
<type name="Magento\Cms\Model\Wysiwyg\CompositeConfigProvider">
16+
<arguments>
17+
<argument name="variablePluginConfigProvider" xsi:type="array">
18+
<item name="default" xsi:type="string">Magento\Variable\Model\Variable\ConfigProvider</item>
19+
</argument>
20+
<argument name="widgetPluginConfigProvider" xsi:type="array">
21+
<item name="default" xsi:type="string">Magento\Widget\Model\Widget\Config</item>
22+
</argument>
23+
<argument name="wysiwygConfigPostProcessor" xsi:type="array">
24+
<item name="default" xsi:type="string">Magento\Cms\Model\Wysiwyg\DefaultConfigProvider</item>
25+
</argument>
26+
<argument name="galleryConfigProvider" xsi:type="array">
27+
<item name="default" xsi:type="string">Magento\Cms\Model\Wysiwyg\Gallery\DefaultConfigProvider</item>
28+
</argument>
29+
</arguments>
30+
</type>
31+
```
32+
33+
Or the Magento_PageBuilder module:
34+
35+
```xml
36+
<type name="Magento\Cms\Model\Wysiwyg\CompositeConfigProvider">
37+
<arguments>
38+
<argument name="variablePluginConfigProvider" xsi:type="array">
39+
<item name="Magento_PageBuilder/pageBuilderAdapter" xsi:type="string">Magento\Cms\Model\WysiwygDefaultConfig</item>
40+
</argument>
41+
<argument name="widgetPluginConfigProvider" xsi:type="array">
42+
<item name="Magento_PageBuilder/pageBuilderAdapter" xsi:type="string">Magento\Cms\Model\WysiwygDefaultConfig</item>
43+
</argument>
44+
<argument name="wysiwygConfigPostProcessor" xsi:type="array">
45+
<item name="Magento_PageBuilder/pageBuilderAdapter" xsi:type="string">Magento\Cms\Model\WysiwygDefaultConfig</item>
46+
<item name="default" xsi:type="string">Magento\PageBuilder\Model\Wysiwyg\DefaultConfigProvider</item>
47+
</argument>
48+
<argument name="galleryConfigProvider" xsi:type="array">
49+
<item name="Magento_PageBuilder/pageBuilderAdapter" xsi:type="string">Magento\Cms\Model\WysiwygDefaultConfig</item>
50+
</argument>
51+
</arguments>
52+
</type>
53+
```
854

9-
## Edit the module's `di.xml` file {#edit-di}
55+
The `DefaultConfigProvider` class returns the data required to render the TinyMCE editor.
56+
From the example, the class `Magento\PageBuilder\Model\Wysiwyg\DefaultConfigProvider` overrides the existing configuration provided by the `Magento_CMS` module.
1057

11-
Revise the `di.xml` file, adding the configuration settings as an argument to `Magento\PageBuilder\Model\Wysiwyg\DefaultConfigProvider`, to customize the TinyMCE editor present in Page Builder.
58+
## Extending the TinyMCE editor
1259

13-
The following code shows an example of configuration settings in the `di.xml` file that determine the font sizes available for selection and add a paragraph menu option associated with the `<p>` tag:
60+
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`.
61+
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:
1462

1563
```xml
1664
<type name="Magento\PageBuilder\Model\Wysiwyg\DefaultConfigProvider">
@@ -27,6 +75,81 @@ The following code shows an example of configuration settings in the `di.xml` fi
2775
</arguments>
2876
</type>
2977
```
30-
See a list of possibly TinyMCE settings on their [website](https://www.tinymce.com/docs/configure/).
3178

32-
Once you have edited the `di.xml` file you can apply custom styling for the settings you implemented in the related CSS file.
79+
Once you have edited the `di.xml` file, you can apply custom styling for the settings you implemented in the related CSS file.
80+
81+
The config of the TinyMCE editor can be extended with a plugin.
82+
Configuration providers are classes with a `getConfig()` method that return the configuration for a specific entity.
83+
84+
For instance, in the `Magento\Cms\Model\Wysiwyg\DefaultConfigProvider` class, the `getConfig()` method
85+
adds the additional configuration and enables a list of plugins:
86+
87+
```php
88+
/**
89+
* Class DefaultConfigProvider returns data required to render tinymce4 editor
90+
*/
91+
class DefaultConfigProvider implements \Magento\Framework\Data\Wysiwyg\ConfigProviderInterface
92+
{
93+
...
94+
95+
/**
96+
* {@inheritdoc}
97+
*/
98+
public function getConfig(\Magento\Framework\DataObject $config) : \Magento\Framework\DataObject
99+
{
100+
$config->addData([
101+
'tinymce4' => [
102+
'toolbar' => 'formatselect | bold italic underline | alignleft aligncenter alignright | '
103+
. 'bullist numlist | link table charmap',
104+
'plugins' => implode(
105+
' ',
106+
[
107+
'advlist',
108+
'autolink',
109+
'lists',
110+
'link',
111+
'charmap',
112+
'media',
113+
'noneditable',
114+
'table',
115+
'contextmenu',
116+
'paste',
117+
'code',
118+
'help',
119+
'table'
120+
]
121+
),
122+
'content_css' => $this->assetRepo->getUrl('mage/adminhtml/wysiwyg/tiny_mce/themes/ui.css')
123+
]
124+
]);
125+
return $config;
126+
}
127+
}
128+
```
129+
130+
In this case, the `Magento\Cms\Model\Wysiwyg\Gallery\DefaultConfigProvider` class enables the image plugin.
131+
See a list of available TinyMCE settings on their [website](https://www.tinymce.com/docs/configure/).
132+
133+
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.
134+
135+
```php
136+
...
137+
138+
/**
139+
* @param \Magento\Cms\Model\Wysiwyg\Gallery\DefaultConfigProvider $subject
140+
* @param \Magento\Framework\DataObject $result
141+
* @return \Magento\Framework\DataObject $result
142+
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
143+
*/
144+
public function afterGetConfig(\Magento\Cms\Model\Wysiwyg\Gallery\DefaultConfigProvider $subject, \Magento\Framework\DataObject $result)
145+
{
146+
$result->addData([
147+
'tinymce4' => [
148+
...
149+
]
150+
]);
151+
152+
return $result;
153+
...
154+
}
155+
```

0 commit comments

Comments
 (0)