[6.0] Fix TinyMCE editor not respecting width and height settings

[RickR2H]

Pull Request for Issue #46320

Summary of Changes

This update improves the Joomla CMS TinyMCE editor plugin configuration and behavior consistency so the editor will respect the settings in the plugin configuration. The following changes have been implemented:

• Removed editor width on Joomla installation so the editor width now defaults to 100% automatically.
• Set default height to 550px and width to 100% in both the plugin configuration and database during installation for consistent initialization.
• Ensured the editor respects configuration values, making sure width and height are applied according to the settings defined in the plugin parameters.
• Adjusted the editor’s z-index to ensure it properly overlaps the settings panel on the right side when editing articles, preventing visual clipping or overlap issues.
• Added a missing description to the editor plugin configuration for better clarity and documentation within the administrator interface.

Testing Instructions

1. Install Joomla and verify that in the TinyMCE plugin configuration:

• The width field is 100%.
• The height is set to 550px.
• Build the SCSS via: npm run build:css

2. Change the editor width to 90vw in the TinyMCE plugin settings.

• Open an article for editing and confirm that the editor overlaps the settings panel on the right side.
• Use the resize grip at the bottom of the editor to verify that it correctly overlays the side panel.

3. Change the editor height to 1000px in the TinyMCE plugin settings.

• Open an article and confirm that the editor now renders with a height of 1000px.

4. Check the descriptions in the TinyMCE plugin settings and verify that all fields display proper descriptions.

5. Open for example modules\mod_custom\mod_custom.xml and add the following code in the xml after the background image field:

<field
	name="editor1"
	type="editor"
	label="text editor 1"
	height="900"
	width="900"
/>
<field
	name="editor2"
	type="editor"
	label="text editor 2"
	height="900"
/>

Check in a custom HTML module is the editor fields now below the background image respect the width and height set in the field parameters.

6. Add a custom field with type Editor. Check if the default editor size values are respected (width 100% and height 250px). Change the editor render width and height in the custom fields check if these are also respected.

Actual result BEFORE applying this Pull Request

• The editor ignores width and height configuration values and always reverts to default settings.
• The editor appears underneath the right-side settings panel when adjusting its width.

Expected result AFTER applying this Pull Request

• The editor respects width and height values set in the plugin configuration.
• The editor correctly overlaps the right-side settings panel when its width is adjusted.
• All configuration field descriptions are visible and accurate.

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[Fedik]

Your changes break possibility to set height per editor, when the form have multiple editors:

<field type="editor" name="text1" label="Text 1" width="100%" height="200"/>
<field type="editor" name="text2" label="Text 2" />

First field should be 200 by height and second field should be "plugin default" by height.

[RickR2H]

<field type="editor" name="text1" label="Text 1" width="100%" height="200"/>
<field type="editor" name="text2" label="Text 2" />

@Fedik I will check! Thanks for the feedback

[RickR2H]

@Fedik When should the values from the plugin settings be respected? I'm now at the pont that values set in the editor field are respected when width and height are set in the field configuration. The article editor is not responding for now.

[RickR2H]

@Fedik I could check for the $name in the display function in plugins\editors\tinymce\src\PluginTraits\DisplayTrait.php and load the values from the plugin settings when an article editor is active.

[brianteeman]

There is a bug in tinymce

Resizing the editor’s height would add a fixed width value.
https://www.tiny.cloud/docs/tinymce/latest/changelog/

You should probably up date tinymce before debugging further

[RickR2H]

@brianteeman is this something we have to do in an other PR? I've never updated TinyMCE, so could use some help if that is necessary,

[Fedik]

When should the values from the plugin settings be respected?

The priorities is following:

1. the field attribute
2. the plugin parameters

But because of #46320 (comment) the plugin never reach "plugin parameters"

[RickR2H]

1. So if no values are set in the form field the value of the tinymce config should be respected?

2. I'm now working on a solution so that when the form field editor is used, the width and height, if set, will be respected. If not defined, they will fall back to 100% width and 500px hight. The settings in the plugin will only reflect on the editor in the article edit.

Which is better? I guess 1...

[Fedik]

So if no values are set in the form field the value of the tinymce config should be respected?

Yes, right. It already works like that, kind of.
To make it fully work it need to remove defaults from the editor field

joomla-cms/libraries/src/Form/Field/EditorField.php

Lines 208 to 209 in 508ac3d

	$this->height = $this->element['height'] ? (string) $this->element['height'] : '500';
	$this->width = $this->element['width'] ? (string) $this->element['width'] : '100%';

But this can break editors sizing of existing installations.

[brianteeman]

@brianteeman is this something we have to do in an other PR? I've never updated TinyMCE, so could use some help if that is necessary,

You would need to check with the maintainers if they will accept an update to TinyMCE in a patch release. I only mentioned it because at least from their changelog it is relevant to this PR. I wouldnt want you to waste time fixing a bug if its already been fixed

[RickR2H]

@Fedik I removed the default values from the EditorField. The default is now set when the editor is generated in thr DisplayTrait.php. Could this be a solution?

[Fedik]

Yes, that should work. Then this should go in to 6.1-dev. It changes the behavior.

Also need to revert changes in DisplayTrait.php because the same already exist a few line down

joomla-cms/plugins/editors/tinymce/src/PluginTraits/DisplayTrait.php

Lines 519 to 520 in b7d5d5a

	'height' => $this->params->get('html_height', '550px'),
	'width' => $this->params->get('html_width', ''),